Информационные системы, работающие с MySQL по-прежнему актуальны и широко используются. MySQL предоставляет надежное и масштабируемое решение для хранения данных, что делает его популярным выбором для веб-разработчиков [1]. Многие современные веб-приложения, включая интернет-магазины и корпоративные системы, продолжают использовать MySQL благодаря его производительности, безопасности и поддержке сообщества.

При разработке информационной системы, которая функционирует в Web, первым делом необходимо выбрать хостинг. Хостинг сайтов – это онлайн услуга, которая позволяет публиковать веб-сайт или веб-приложение в интернете. Когда пользователь подписывается на услугу хостинга, он обычно арендует пространство на сервере, на котором он может хранить все файлы и данные, необходимые для правильного функционирования сайта.

Сервер – это физический компьютер, который работает без перерывов, чтобы сайт был доступен всё время для тех, кто хочет его посетить. Хостинг отвечает за поддержание работы сервера, защиту его от вредоносных атак и передачу контента (текста, изображений, файлов) с сервера в браузеры посетителей.

В качестве примера был выбран сайт для хостинга https://www.hostland.ru. Для начала необходимо пройти стандартную процедуру регистрации. Данный хостинг-провайдер предоставляет месяц бесплатного пробного периода и различные тарифы (рисунок 1).

Рисунок 1. Тарифы.

Создание пользователя и базы данных проходит на вкладке MySQL. Также необходимо привязать пользователя к ней.

Для дальнейшей работы переходим в phpMyAdmin. PhpMyAdmin – это веб-интерфейс для администрирования системы управления баз данных MySQL. PhpMyAdmin позволяет через браузер осуществлять администрирование сервера MySQL, запускать команды SQL и просматривать содержимое таблиц и баз данных [2].

Для разработки базы данных мебельного магазина сначала необходимо продумать структуру будущей базы данных. Это включает в себя определение таблиц, их полей и связей между ними. Рассмотрим пример структуры базы данных мебельного магазина.

1. Таблица “furniture”:

•    furniture_id (INT, PRIMARY KEY): уникальный идентификатор мебели.

•    name (VARCHAR(255), NOT NULL): название мебели.

•    category_id (INT): идентификатор категории мебели, связанный с таблицей “furniture_categories”.

•    material (ENUM(‘Дерево’, ‘Металл’, ‘Пластик’, ‘Стекло’, ‘Другой’)): материал, из которого изготовлена мебель.

•    manufacturing_date (DATE): дата производства мебели.

•    description (TEXT): описание мебели.

•    price (INT): цена мебели.

2. Таблица “furniture_categories”:

•    category_id (INT, PRIMARY KEY): уникальный идентификатор категории мебели.

•    category_name (VARCHAR(255), NOT NULL): название категории мебели.

•    parent_category_id (INT): идентификатор родительской категории мебели (если применимо).

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

Рисунок 2. Создание таблицы.

Для заполнения таблиц данными нужно перейти на вкладку «Вставить» (рисунок 3).

Рисунок 3. Заполнение таблицы данными.

Далее создаем скрипт для подключения к базе данных из веб-приложения. Для работы с базой данных потребуется веб-интерфейс с разграничением доступа. Подойдет простейшее веб-приложение.

Переходим на сайт Hostland, далее заходим в файловый менеджер. Переходим в папку с именем пользователя/htdocs/www/connection. Для создания простейшего веб-приложения в папке connection необходимо создать файл data.php для подключения к базе данных, где будет объект data класса PDO (рисунок 4). PDO (PHP Data Objects) — это расширение для работы с базами данных в PHP. Основное преимущество использования PDO заключается в том, что оно позволяет писать код, который будет работать с разными базами данных без необходимости вносить изменения в сам код. Это особенно полезно, если вы планируете миграцию с одной системы управления базами(СУБД) данных на другую или хотите поддерживать несколько СУБД одновременно.

Рисунок 4. Код для подключения к базе данных.

Также для первичного вывода данных необходимо создать файл index.php в папке www. В этом файле мы подключаем файл data.php с помощью include_once и выводим данные таблицы на экран (рисунок 5).

Рисунок 5. Код для вывода таблицы на экран.

Для создания формы поиска потребуется создание нового файла index2.php (рисунок 6). В нем добавляется предложение WHERE, которое указывает, что оператор SQL Data Manipulation Language (DML) должен затрагивать только строки, соответствующие указанным критериям [3].

Рисунок 6. Код для создания формы поиска по столбцу name.

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

Информационные системы, работающие с MySQL по-прежнему актуальны и широко используются. MySQL предоставляет надежное и масштабируемое решение для хранения данных, что делает его популярным выбором для веб-разработчиков [1]. Многие современные веб-приложения, включая интернет-магазины и корпоративные системы, продолжают использовать MySQL благодаря его производительности, безопасности и поддержке сообщества.

Для того, чтобы и на вашем сайте была форма заполнения таблицы базы данных рассмотрим данный пример на хостинге с использованием phpMyAdmin.

В первую очередь создаем таблицу для учета программного оснащения организации software_info. Она имеет следующую структуру:

•    id (INT, PRIMARY KEY): Уникальный идентификатор программного обеспечения.

•    name (VARCHAR(255)): Название программного обеспечения.

•    version (INT): Версия программного обеспечения.

•    status (ENUM(‘Активно’, ‘Неактивно’, ‘Устарело’)): Статус программного обеспечения.

•    release_date (DATE): Дата выпуска программного обеспечения.

•    description (TEXT): Описание программного обеспечения.

•    organization_id (INT, FOREIGN KEY): Связь с таблицей организации через идентификатор организации.

Эта таблица создается в phpMyAdmin. PhpMyAdmin – это веб-интерфейс для администрирования системы управления баз данных MySQL. PhpMyAdmin позволяет через браузер осуществлять администрирование сервера MySQL, запускать команды SQL и просматривать содержимое таблиц и баз данных [2].

Далее перейдем к написанию скрипта добавления и создадим файл dobavlenie.php.

При помощи include_once подключаем базу данных (рисунок 1). В connection/data.php хранятся данные о названии и пользователе таблицы базы данных.

Рисунок 1. Подключение файла добавления данных к проекту

Создадим HTML-форму для ввода данных, которая отправляет данные на скрипт “dobavlenie.php” методом POST (рисунок 2).

Рисунок 2. Код формы добавления

Сама форма имеет следующий вид (рисунок 3):

Рисунок 3. Форма добавления

Используя PHP, мы создаем новый экземпляр объекта класса «data» и скрипт, который реагирует на нажатие кнопки «Добавить». Скрипт начинает с проверки наличия POST-запроса с данными формы.

Если данные получены, выполняется запрос INSERT для добавления данных в таблицу «software_info» [3]. Данные из POST-запроса собираются в массив и передаются для выполнения запроса.

После этого выводится сообщение об успешном добавлении данных в базу данных или сообщение об ошибке, если запрос не удалось выполнить (рисунок 4).

Рисунок 4. Скрипт добавления

В конце работы получаем форму, заполняющую таблицу базы данных программного оснащения организации.

Нередко на сайте встречается кнопка регистрации пользователя. Для того, чтобы и на нашем сайте была подобная функция, создадим файл на PHP.

PHP – это скриптовый язык программирования с открытым исходным кодом. Изначально он создавался для разработки веб-приложений, но в процессе обновлений стал языком общего назначения.

Информационные системы, работающие с MySQL по-прежнему актуальны и широко используются. MySQL предоставляет надежное и масштабируемое решение для хранения данных, что делает его популярным выбором для веб-разработчиков [1]. Многие современные веб-приложения, включая интернет-магазины и корпоративные системы, продолжают использовать MySQL благодаря его производительности, безопасности и поддержке сообщества.

Данный пример будет рассматриваться на хостинге Hostland с использованием phpMyAdmin. PhpMyAdmin — это специальная утилита, написанная на PHP, которая реализует графический интерфейс для управления базами данных MySQL через браузер [2].

На главной странице уже существующего сайта добавляем кнопку «Регистрация» и создаем файл reg.php.

Подключаем нашу таблицу к данному файлу с помощью include_once (рисунок 1).

Рисунок 1. Подключение таблицы к файлу.

Для запроса будем использовать метод POST. Метод POST в PHP передаёт информацию через HTTP-заголовки [3]. Создаем два поля с подписями «Имя пользователя» и «Пароль» (рисунок 2).

Рисунок 2. Создание полей регистрации.

Также создадим дополнительный вопрос с выпадающим списком. Например, любимое домашнее животное (рисунок 3).

Рисунок 3. Создание вопроса с выпадающим списком.

Далее необходимо создать кнопку «Зарегистрироваться» и перейти в phpMyAdmin. Создаем таблицу login, куда и будут записываться данные (рисунок 4).

Рисунок 4. Таблица для записи зарегистрированных пользователей.

Также добавим проверку. В случае, если пользователь с данным именем уже существует в таблице, на экран будет выводиться надпись «такой пользователь уже есть» (рисунки 5,6).

Рисунок 5. Код для проверки.

Рисунок 6. Пример работы кода для проверки.

Если же пользователя с введенным именем не будет в таблице, данные сохранятся в login и пользователь будет перенаправлен на главную страницу (рисунок 7).

Рисунок 7. Код для сохранения данных в таблице.

Все зарегистрированные пользователи будут видны в phpMyAdmin в таблице login (рисунок 8).

Рисунок 8. Таблица с зарегистрированными пользователями.

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

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