Заметки Админа

Всем привет, при разработке веб приложений происходит взаимодействие клиентской части и серверной например в работе с базой данных необходимо добавлять, редактировать или удалять записи. Зачастую все проходит по отлаженной схеме в виде GET или POST запросов. Однако есть небольшие неудобства – среди которых можно выделить основное, при отправке данных PHP скрипт возвращает ответ от сервера и это происходит на другой странице, а если это массовый ввод данных – то становится неудобно вводить данные, отсылать их в базу, получать ответ на новой странице, а затем возвращаться на страницу ввода.
Чтобы ускорить и упростить работу оператору воспользуемся динамическим добавлением данных без перезагрузки страницы с использованием инструментов ajax и jquery, а подгружать информацию будем циклом foreach php. Другими словами мы будем отправлять данные в базу с помощью ajax методов и ждать ответа от PHP о успешном выполнении запроса и отображать результат.
Происходит фоновый обмен данными между браузером и сервером и при этом веб страничка не перезагружается полностью, а лишь обновляются необходимые данные
Чтобы рассмотреть как это работает – давайте обратимся к примерам. В нашем случае создадим небольшое web-приложение для добавления имени и отчества в базу данных.
Итак начнем:
Для начала создадим файл index.php в котором опишем стили, веб формы и механизм взаимодействия с сервером для управления данными.
Раздел HEAD здесь прописываем необходимые библиотеки jquery для обмена данными, bootstrap фрейморк для придания более представительного вида нашему приложению. Также определим некоторые стили:

На следующем этапе опишем внешний вид страницы приложения тэг body

Не забудем еще про создание модального окна добавления или редактирования данных, которое будет появляться при нажатии на кнопку “Добавить запись” и сделаем его скрытым, а вызывать его будем по нажатию кнопки Добавить запись

Ну а дальше за тэгом <script> идет логика отвечающая за отображение информации на стороне клиента, а также отправка и получение результата от сервера.

Обнуляем переменные и создаем модальное окно заново

JQuery код для обработки нажатий на клавиши при добавлении или редактировании данных.

Cледующий блок кода отвечает за обновление данных – при нажатии на кнопку Обновить 

При нажатии на кнопку Удалить срабатывает этот код

C файлом index.php покончили, клиентская часть готова, настало время сделать серверную часть которая будет принимать запросы выполнять необходимые действия и отправлять ответ в клиентскую часть приложения.

Итак назовем файл action.php и впоследствии будем к нему обращаться из index.php

Создаем соединение с базой данных

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

Обрабатываем нажатие кнопки обновить информацию следующим кодом

Удаление данных из базы происходит так:

В браузере мы видим alert(data) где в переменной data содержится код echo ‘Данные удалены’ которые мы отправили в клиентскую часть из серверной action.php

На этом пожалуй все, исходники кода прилагаю