Создание системы SCRUD с использованием jQuery, JSON и DataTables

• Кнопка Добавить
• В основном пустая таблица (которая будет отображать данные базы данных)
• Форма добавления / редактирования
• Текстовое сообщение
• Контейнер сообщений
• Контейнер загрузочных сообщений

В разделе заголовка HTML-файла мы загружаем jQuery версии 1.11.2. Этот файл загружен с сервера Google. Как указано здесь :

Служба размещенных библиотек Google — это стабильная, надежная, высокоскоростная и доступная по всему миру сеть распространения контента для многих популярных библиотек JavaScript с открытым исходным кодом.

DataTables предоставляет аналогичный CDN. Мы загружаем DataTables версии 1.10.0 из их сети и подключаемый модуль jQuery Validation версии 1.13.1 из CDN, чтобы начать работу.

По назначению таблица HTML не имеет содержимого в разделе tbody мы вставим данные таблицы, используя плагин DataTables jQuery. Поскольку для работы этой страницы требуется JavaScript, мы предоставляем тег noscript В этом случае отображается пустая таблица и кнопка «Добавить компанию» не работает.

Вот как будет выглядеть сообщение:

База данных MySQL

Теперь пришло время создать базу данных MySQL для хранения данных примера. Данные поступают с этой страницы Википедии, и у нас есть информация о крупнейших ИТ-компаниях, отсортированных по доходам. Используйте следующий запрос для создания таблицы:

 CREATE TABLE `it_companies` (
  `company_id` int(11) unsigned NOT NULL auto_increment,
  `rank` int(11) unsigned NOT NULL,
  `company_name` varchar(255) NOT NULL,
  `industries` varchar(255) NOT NULL,
  `revenue` float(9,2) NOT NULL,
  `fiscal_year` year(4) NOT NULL,
  `employees` int(11) unsigned NOT NULL,
  `market_cap` float(9,2) NOT NULL,
  `headquarters` varchar(255) NOT NULL,
  PRIMARY KEY  (`company_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

После создания таблицы базы данных мы можем вставить данные примера. Чтобы упростить создание таблицы базы данных и импортировать данные примера, вы можете использовать файл SQL с именем queries.sqlдоступен на GitHub .

PHP скрипт для обработки данных базы данных

На данный момент данные доступны в базе данных. Таким образом, мы можем настроить скрипт PHP, который будет извлекать информацию из базы данных и отправлять ее в формате данных JSON. Для этого нам нужно получить данные, обработанные сценарием PHP (которые будут представлены нашим собственным сценарием jQuery), такие как получение всех компаний или обновление записи конкретной компании. Затем мы подключаемся к базе данных и получаем из нее необходимые данные. Пожалуйста, не забудьте ввести свои собственные данные для входа в скрипт data.php

 // Database details
$db_server   = 'localhost';
$db_username = '***';
$db_password = '***';
$db_name     = '***';

Мы используем один и тот же PHP-файл для предоставления всей информации из базы данных, которая нужна скрипту для правильной работы. Используя параметр в URL, мы сообщаем PHP-скрипту, какие данные ему нужно отправить на веб-страницу. Мы используем один и тот же шаблон для вставки, обновления и удаления.

Мы используем функцию PHP json_encode Мы передаем данные с помощью подмассива под названием «данные». В том же базовом массиве есть два других поля для передачи дополнительной информации: было ли задание базы данных выполнено успешно (результат: successerrorid missing Мы называем эту страницу PHP data.php

Наш собственный скрипт jQuery

Теперь мы можем собрать все вместе. Мы начнем с создания файла с именем webapp.js В этом файле мы поместим наш собственный код jQuery для инициализации DataTables и jQuery Validation. Кроме того, мы пишем код для добавления, обновления и удаления записей базы данных.

Сначала мы инициализируем плагин jQuery DataTables и настраиваем параметры таблицы. После этого плагин jQuery Validator также вызывается с использованием некоторых настроек. Я добавил значки в форму добавления / редактирования, чтобы пользователи могли легко видеть, правильно ли заполнены поля ввода. Плагин jQuery Validation просматривает код HTML-формы и автоматически определяет, какие поля ввода обязательны для заполнения. Это делается путем добавления required