Hostland — это популярный хостинг-провайдер, который предоставляет удобный доступ к веб-серверу, базам данных MySQL и другим необходимым инструментам для веб-разработки. Работа с Hostland начинается с регистрации и выбора тарифного плана, который соответствует вашим потребностям.

Основные шаги работы с Hostland:

• Регистрация и выбор тарифного плана: Выберите подходящий план с необходимыми ресурсами (дисковое пространство, трафик, количество баз данных и т.д.) и зарегистрируйтесь на сайте.
  
• Управление доменом: Зарегистрируйте или перенесите свой домен на Hostland.
  
• Настройка хостинга:
  
  • Создание базы данных MySQL: В панели управления Hostland создайте новую базу данных, определите пользователя и установите пароль.
    
  • Доступ к файловой системе: Используйте FTP или файловый менеджер для загрузки файлов вашего веб-приложения.
    
• Установка PHP: Hostland поддерживает PHP, поэтому вам не нужно дополнительно устанавливать его.
  
• Работа с phpMyAdmin: Для управления базой данных Hostland предоставляет доступ к phpMyAdmin.
  

phpMyAdmin

phpMyAdmin — это мощный инструмент для администрирования баз данных MySQL через веб-интерфейс. Он предоставляет графическое окружение для выполнения различных операций, таких как:

1. Создание и редактирование баз данных: Используйте phpMyAdmin для создания новых баз данных, таблиц, индексов, ограничений и т.д.
   
2. Управление таблицами: Изменяйте структуру таблиц, добавляйте и удаляйте столбцы, редактируйте типы данных и т.д.
   
3. Запросы SQL: Выполняйте запросы SQL для извлечения, вставки, обновления и удаления данных.
   
4. Импорт и экспорт данных: Импортируйте и экспортируйте данные в различных форматах (CSV, SQL и т.д.).
   
5. Управление пользователями: Создавайте и редактируйте пользователей базы данных, настраивайте их права доступа.
   

Итак, я решил создать интерактивный веб-сайт для небольшого овощного магазина, где можно было бы редактировать информацию о покупателях и овощах прямо на сайте, без необходимости перезагружать страницу. Для этого я использовал комбинацию PHP, MySQL, jQuery и AJAX на хостинге Hostland.

Сначала я спроектировал базу данных. Я создал три таблицы в phpMyAdmin: vegans (для информации о покупателях), vegetables (для информации об овощах) и vegan_vegetable (связующая таблица для реализации связи «многие ко многим», так как один покупатель может купить несколько овощей, а один овощ — несколько покупателей). В каждой таблице я определил необходимые поля с соответствующими типами данных (целые числа, строки, даты и десятичные числа для цен).

Затем я занялся созданием главной страницы (index.php). Здесь я использовал PHP для подключения к базе данных MySQL и выполнения SQL-запросов SELECT для извлечения данных о покупателях и овощах. Полученные данные я отобразил в виде двух HTML-таблиц. В верхней части страницы я добавил кнопку “Интерактив”.

Кнопка “Интерактив” ведёт на страницу interactive.php. На этой странице я снова подключился к базе данных, получил данные и отобразил их в виде тех же таблиц, но с одним важным отличием: каждая ячейка, которую можно редактировать, получила класс dynamic.

Далее, я использовал jQuery для того, чтобы добавить интерактивность. При клике на ячейку с классом dynamic, стандартный текст заменялся на поле ввода. После того как пользователь внёс изменения и вышел из поля (событие blur) или нажал Enter, данные отправлялись на сервер с помощью AJAX.

Серверная часть, обработка изменений, реализована в файле itable_save.php. Этот PHP-скрипт получал данные из AJAX-запроса, формировал подготовленный SQL-запрос UPDATE для безопасности и записывал изменения в базу данных. После успешного обновления он возвращал подтверждающее сообщение. 

Для обновления таблиц на главной странице после сохранения изменений на интерактивной странице я создал ещё один файл update_tables.php. Этот скрипт получает актуальные данные из базы данных и формирует их в формате JSON. Затем, с помощью AJAX на странице interactive.php, обновляется контент таблиц на главной странице index.php. 

В результате, при нажатии на кнопку “Интерактив”, я перехожу на страницу с редактируемыми таблицами. После сохранения изменений, главная страница автоматически обновляется с учетом внесенных данных, не требуя полной перезагрузки. 

В целом, проект оказался довольно интересным и показал, как мощно сочетание PHP, MySQL, jQuery и AJAX может улучшить пользовательский опыт, создавая динамические и интерактивные веб-страницы.

Рассмотрим создание интерактивного интерфейса на примере овощного магазина, где пользователи могут редактировать данные о покупателях и овощах.

1. Проектирование Базы Данных:

Мы создали три таблицы:

• vegans (покупатели)
  
• vegetables (овощи)
  
• vegan_vegetable (связь многие ко многим)

2. Создание динамической веб-страницы (index.php):

• На главной странице отображаются таблицы покупателей и овощей (статические данные).
  
• Добавлена кнопка “Интерактив”, которая ведет на новую страницу с интерактивными таблицами interactive.php
  
• Используется PHP и MySQL для подключения к базе данных и извлечения данных.
  
• Для отображения данных используются HTML-таблицы.
  

<!DOCTYPE html>
<html>
<head>
    <title>Овощной Магазин</title>
    <style>
        .dynamic {
            cursor: pointer;
        }
        .dynamic:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
<center>
    <button id=”interactiveButton”>Интерактив</button> <br> <br>  <!– Кнопка сверху –>
    <h1>Овощной Магазин</h1>
    <?php
    $servername = ”localhost”;
    $username = ”host1876921_preobraz”;  // Замените на имя пользователя базы данных
    $password = ”715216″;  // Замените на пароль базы данных
    $dbname = ”host1876921_interactiveovochi”;  // Замените на имя вашей базы данных
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        die(“Ошибка подключения: ” . $conn->connect_error);
    }
    echo ”<h2>Список покупателей</h2>”;
    $sql_vegans = ”SELECT * FROM vegans”;
    $result_vegans = $conn->query($sql_vegans);
 
    if ($result_vegans->num_rows > 0) {
        echo ”<table id=’vegansTable’ border=’1′>
            <tr>
               <th>ID</th>
                <th>Имя</th>
                <th>Фамилия</th>
                <th>Email</th>
                <th>Телефон</th>
                <th>Дата регистрации</th>
                <th>Город</th>
            </tr>”;
        while ($row = $result_vegans->fetch_assoc()) {
            echo ”<tr>
                    <td>” . $row["id_vegan"] . ”</td>
                    <td>” . $row["first_name"] . ”</td>
                    <td>” . $row["last_name"] . ”</td>
                    <td>” . $row["email"] . ”</td>
                    <td>” . $row["phone_number"] . ”</td>
                    <td>” . $row["registration_date"] . ”</td>
                    <td>” . $row["city"] . ”</td>
                </tr>”;
        }
        echo ”</table>”;
    } else {
        echo ”<p>Нет покупателей</p>”;
    }
    echo ”<h2>Список овощей</h2>”;
    $sql_vegetables = ”SELECT * FROM vegetables”;
    $result_vegetables = $conn->query($sql_vegetables);
    if ($result_vegetables->num_rows > 0) {
        echo ”<table id=’vegetablesTable’ border=’1′>
            <tr>
                <th>ID</th>
                <th>Название</th>
                <th>Сорт</th>
                <th>Цена за кг</th>
                <th>Количество на складе</th>
                <th>Дата добавления</th>
                <th>Страна происхождения</th>
            </tr>”;
        while ($row = $result_vegetables->fetch_assoc()) {
            echo ”<tr>
                    <td>” . $row["id_vegetable"] . ”</td>
                    <td>” . $row["name"] . ”</td>
                    <td>” . $row["variety"] . ”</td>
                    <td>” . $row["price_per_kg"] . ”</td>
                    <td>” . $row["stock_quantity"] . ”</td>
                     <td>” . $row["date_added"] . ”</td>
                    <td>” . $row["country_origin"] . ”</td>
                </tr>”;
        }
        echo ”</table>”;
    } else {
        echo ”<p>Нет овощей</p>”;
    }
    $conn->close();
    ?>
</center>
<script>
    document.getElementById(‘interactiveButton’).addEventListener(‘click’, function() {
        window.location.href = ’interactive.php’;
    });
</script>
</body>
</html>

3. Создание интерактивной страницы (interactive.php):

• На странице interactive.php отображаются таблицы покупателей и овощей c возможностью изменения данных.
  
• Используется PHP и MySQL для подключения к базе данных и извлечения данных.
  
• Каждое поле таблицы, которое можно изменять имеет класс .dynamic.
  
• Скрипт JQuery, который создает input поля для изменения.
  
• Используется Ajax-запрос для сохранения изменений.
  
• Добавлена кнопка “Назад”, которая перенаправляет на главную страницу index.php.
  

  
  

  
  

  
  

  
  

  

  
  

4. Обработка изменений на сервере (itable_save.php):

• Этот PHP-скрипт получает данные через POST-запрос.
  
• Выполняет SQL-запрос UPDATE для изменения данных в базе.
  
• Возвращает сообщение об успешном или неудачном обновлении.
  

  
  

  
  

5. Обновление данных на главной странице (update_tables.php):

• Этот PHP-скрипт получает актуальные данные из базы.
  
• Возвращает данные в формате JSON, которые применяет скрипт на странице interactive.php

<?php
$servername = ”localhost”;
$username = ”host1876921_preobraz”;  // Замените на имя пользователя базы данных
$password = ”715216″;  // Замените на пароль базы данных
$dbname = ”host1876921_interactiveovochi”;  // Замените на имя вашей базы данных
$output = array();
// Вывод таблицы покупателей
$sql_vegans = ”SELECT * FROM vegans”;
$result_vegans = $conn->query($sql_vegans);
$output["vegans"] = ”";
if ($result_vegans->num_rows > 0) {
    $output["vegans"] .= ”
            <tr>
                <th>ID</th>
                <th>Имя</th>
                <th>Фамилия</th>
                <th>Email</th>
                <th>Телефон</th>
                <th>Дата регистрации</th>
                <th>Город</th>
            </tr>”;
    while ($row = $result_vegans->fetch_assoc()) {
        $output["vegans"] .= ”
            <tr>
                <td>” . $row["id_vegan"] . ”</td>
                <td>” . $row["first_name"] . ”</td>
                <td>” . $row["last_name"] . ”</td>
                <td>” . $row["email"] . ”</td>
                <td>” . $row["phone_number"] . ”</td>
                <td>” . $row["registration_date"] . ”</td>
                <td>” . $row["city"] . ”</td>
            </tr>”;
    }
}
// Вывод таблицы овощей
$sql_vegetables = ”SELECT * FROM vegetables”;
$result_vegetables = $conn->query($sql_vegetables);
$output["vegetables"] = ”";
if ($result_vegetables->num_rows > 0) {
   $output["vegetables"] .=”
           <tr>
               <th>ID</th>
               <th>Название</th>
               <th>Сорт</th>
               <th>Цена за кг</th>
               <th>Количество на складе</th>
               <th>Дата добавления</th>
               <th>Страна происхождения</th>
            </tr>”;
        while ($row = $result_vegetables->fetch_assoc()) {
            $output["vegetables"] .= ”
                <tr>
                  <td>” . $row["id_vegetable"] . ”</td>
                  <td>” . $row["name"] . ”</td>
                  <td>” . $row["variety"] . ”</td>
                  <td>” . $row["price_per_kg"] . ”</td>
                  <td>” . $row["stock_quantity"] . ”</td>
                    <td>” . $row["date_added"] . ”</td>
                     <td>” . $row["country_origin"] . ”</td>
                </tr>”;
        }
}
$conn->close();
echo json_encode($output);
?>

6. Обновление данных на главной странице:

• После успешного сохранения в interactive.php вызывается скрипт обновления таблиц на главной странице
  

7. Использование Ajax:

• Ajax позволяет отправлять данные на сервер и получать ответ без перезагрузки страницы. Это создаёт ощущение динамичности и интерактивности интерфейса.
  

Заключение

В этой статье мы продемонстрировали, как создать интерактивный интерфейс для редактирования данных с использованием AJAX, PHP и MySQL на хостинге Hostland. Вы можете использовать этот пример в качестве отправной точки для разработки более сложных веб-приложений и административных панелей. Главное — это комбинировать знания в области баз данных, серверного и клиентского программирования для достижения желаемого результата.

Введение

Современные веб-приложения требуют высокой интерактивности и отзывчивости интерфейсов. Одной из ключевых технологий, обеспечивающих бесшовное взаимодействие пользователя с приложением, является 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)

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

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

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

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

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

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

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

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

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