ИНТЕРАКТИВНОЕ ИЗМЕНЕНИЕ ДАННЫХ НА ВЕБ-СТРАНИЦЕ С ИСПОЛЬЗОВАНИЕМ AJAX И MYSQL НА HOSTLAND

Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

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. Вы можете использовать этот пример в качестве отправной точки для разработки более сложных веб-приложений и административных панелей. Главное — это комбинировать знания в области баз данных, серверного и клиентского программирования для достижения желаемого результата.

1. W3Schools.com. PHP Tutorial. https://www.w3schools.com/php/ (Общие сведения и справочник по PHP).
2. W3Schools.com. SQL Tutorial. https://www.w3schools.com/sql/ (Общие сведения и справочник по SQL).
3. W3Schools.com. AJAX Tutorial. https://www.w3schools.com/xml/ajax_intro.asp (Основы AJAX).
4. W3Schools.com. jQuery Tutorial. https://www.w3schools.com/jquery/ (Общие сведения и справочник по jQuery).
5. MySQL Documentation. MySQL Reference Manual. https://dev.mysql.com/doc/ (Полная документация по MySQL).
6. PHP Documentation. PHP Manual. https://www.php.net/manual/en/ (Полная документация по PHP).
7. phpMyAdmin Documentation. https://docs.phpmyadmin.net/ (Документация по phpMyAdmin).

Все статьи автора «Мухаяров Дильназ Данисович»