CodeIgniter 4: Обработка форм Ajax с проверкой формы
Ajax предоставляет способ обработки запроса формы без перезагрузки страницы. Вы можете использовать Ajax в CodeIgniter 4 для обработки данных формы. Это позволит вам проверить и отправить форму, не обновляя ее. Это используется на стороне клиента для обработки клиентского запроса в браузере. Если вы работаете над технологией PHP, то при создании веб-приложения всегда необходимо использовать Ajax. Даже вы можете обрабатывать запросы API на стороне клиента с помощью Ajax. Сегодня в этом посте я покажу вам использование Ajax в CodeIgniter 4. В этом демонстрационном проекте я создам базовую форму и проверю ее. После успешной проверки он будет отправлен на указанное действие через Ajax.
Предпосылки
Мы собираемся работать над CodeIgniter 4. Следовательно, для создания нового проекта вы можете скачать установку прямо с официального сайта CodeIgniter. Но я буду использовать диспетчер зависимостей composer. Итак, вы можете продолжить с composer, если вы уже установили его в своей системе.
Кроме того, для настройки проекта CodeIgniter 4 вам потребуется указанная ниже конфигурация.
- PHP >= 7.3
- MySQL (version > 5)
- Apache/Nginx Server
- VS Code Editor
- Composer
Создать проект для обработки форм Ajax в Codeigniter 4
Откройте терминал или командную строку, что у вас есть. Затем введите команду ниже, чтобы установить последнюю версию CodeIgniter.
composer create-project codeigniter4/appstarter ci4-ajaxПриведенная выше команда займет пару минут, чтобы установить проект CodeIgniter в вашу систему. Как только это будет сделано, вам нужно будет настроить среду для проекта.
Настройте среду проекта в CodeIgniter 4
Перед реализацией каких-либо функций в CodeIgniter 4 вам необходимо настроить среду. Поэтому откройте проект в редакторе VS code. Теперь в каталоге проекта найдите файл env. Первоначально вам нужно будет переименовать его в .env. Теперь откройте этот файл и найдите конфигурацию среды внутри файла .env.
В разделе Environment по умолчанию используется среда production. Следовательно, для работы в локальной системе ее необходимо переименовать в development.
.env
#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------
CI_ENVIRONMENT = developmentНа следующем этапе вам нужно будет настроить базу данных для проекта. Так, мы сможем работать над обработкой формы и отправкой данных в таблицу.
Настроить базу данных в Codeigniter 4
Прежде чем перейти к настройке базы данных, сначала создайте базу данных в MySQL. После этого переходим к проекту CodeIgniter 4. Снова войдите в файл .env и в разделе базы данных настройте учетные данные, как показано ниже.
.env
#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------
database.default.hostname = localhost
database.default.database = ci4_ajax
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLiЭто все, что касается конфигурации базы данных. Теперь давайте создадим файл миграции для таблиц.
Создать миграцию в CodeIgniter 4
Для создания новой миграции я воспользуюсь командой spark. Он сгенерирует файл миграции. Я создам одну таблицу, в которой буду хранить некоторые значения, используя обработку формы CodeIgniter AJAX. Следовательно, давайте создадим файл миграции, используя следующую команду. Откройте терминал внутри папки проекта и введите следующую команду.
php spark make:migration ajaxFormsКогда миграция будет создана, она вернет ответ, указанный ниже.
Теперь перейдите в папку app/Config/Database/Migrations, и у вас будет созданный файл миграции. В нашем случае у нас есть файл timestamp_Ajaxforms.php.
Откройте этот файл и замените в нем код на этот:
timestamp_Ajaxforms.php
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class Ajaxforms extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'auto_increment' => true
],
'name' => [
'type' => 'VARCHAR',
'constraint' => '100'
],
'email' => [
'type' => 'VARCHAR',
'constraint' => '255'
],
'password' => [
'type' => 'VARCHAR',
'constraint' => '255'
],
'phone' => [
'type' => 'VARCHAR',
'constraint' => '255'
],
'address' => [
'type' => 'VARCHAR',
'constraint' => '255'
],
'created_at datetime default current_timestamp',
'updated_at datetime default current_timestamp on update current_timestamp'
]);
$this->forge->addKey('id', true);
$this->forge->createTable('ajaxForms');
}
public function down()
{
$this->forge->dropTable('ajaxForms');
}
}Здесь мы определили схему для таблицы ajaxForms. Эту таблицу нужно будет создать внутри базы данных. Следовательно, для этого вам нужно будет перенести эту таблицу. Поэтому нажмите в терминале команду ниже.
php spark migrateЭто сгенерирует таблицу вместе со схемой.
Создание модели в CodeIgniter 4 для обработки форм Ajax
В Codeigniter 4 вы можете создать модель с помощью команды spark. Итак, в том же терминале введите следующую команду.
php spark make:model AjaxFormПриведенная выше команда сгенерирует файл модели. Внутри созданной модели вам нужно будет настроить имя таблицы в соответствии с миграцией, а также массив разрешенных полей. Разрешенные поля будут принимать значения для определенных полей внутри таблицы.
Ajaxform.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class Ajaxform extends Model
{
protected $DBGroup = 'default';
protected $table = 'ajaxForms';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $protectFields = true;
protected $allowedFields = ['name', 'email', 'password', 'address'];
// Dates
protected $useTimestamps = false;
protected $dateFormat = 'datetime';
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
}
Это все, что касается модели и настройки миграции. Теперь, на следующем шаге, вам потребуется представление. Представление будет содержать базовую форму с некоторыми полями ввода.
Создайте представление в CodeIgniter 4 для обработки форм Ajax
Для создания представления перейдите в папку app/Views. Теперь создайте новый файл с именем ajax-form.php и добавьте в него приведенный ниже код.
ajax-form.php
<!doctype html>
<html lang="en">
<head>
<title>Codeigniter 4 Ajax Form Handling</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
<style>
.error {
color: #dc3545;
}
</style>
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 m-auto">
<form method="POST" action="jаvascript:void(0)" id="registrationForm">
<?= csrf_field() ?>
<div class="card shadow">
<div class="card-header">
<h5 class="card-title">Codeigniter 4 Ajax Form Handling</h5>
</div>
<div class="card-body p-4">
<div class="form-group mb-3 has-validation">
<label class="form-label" for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" value="<?php echo set_value('name'); ?>" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="email">Email</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Email" value="<?php echo set_value('email'); ?>" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" value="<?php echo set_value('password'); ?>" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="confirm_password">Confirm Password</label>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" value="<?php echo set_value('confirm_password'); ?>" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="phone">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" value="<?php echo set_value('phone'); ?>" />
</div>
<div class="form-group">
<label class="form-label" for="address">Address</label>
<textarea class="form-control" name="address" id="address" placeholder="Address"><?php echo set_value('address'); ?></textarea>
</div>
</div>
<div class="card-footer d-flex align-items-center">
<button type="submit" id="submit-btn" class="btn btn-success">Save</button>
<div class="response-message ms-3"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script>
if ($("#registrationForm").length > 0) {
$("#registrationForm").validate({
rules: {
name: {
required: true,
maxlength: 50
},
email: {
required: true,
maxlength: 50,
email: true,
},
password: {
required: true,
minlength: 5,
maxlength: 20,
},
confirm_password: {
required: true,
equalTo: "#password",
},
phone: {
required: true,
digits: true,
minlength: 10,
maxlength: 12,
},
address: {
required: true,
minlength: 10,
maxlength: 200,
},
},
messages: {
name: {
required: "Please enter your name",
maxlength: "Name length should be 50 characters long."
},
email: {
required: "Please enter your email",
maxlength: "Email length should be 50 characters long.",
email: "Please enter a valid email",
},
password: {
required: "Please enter your password",
minlength: "Password must be greater than 5 chars",
maxlength: "Password must not be greater than 20 chars",
},
confirm_password: {
required: "Please re-enter your password",
equalTo: "Password not confirmed",
},
phone: {
required: "Please enter contact number",
minlength: "The contact number should be 10 digits",
digits: "Please enter only numbers",
maxlength: "The contact number should be 12 digits",
},
address: {
required: "Please enter your address",
minlength: "Address must be greater than 10 chars",
maxlength: "Address must not be greater than 200 chars",
},
},
submitHandler: function(form) {
$('.response-message').removeClass('d-none');
$('#submit-btn').html('Sending..');
$.ajax({
url: "<?php echo base_url('ajax-store') ?>",
type: "POST",
dаta: $('#registrationForm').serialize(),
dataType: "json",
success: function(response) {
$('#submit-btn').html('Submit');
$('.response-message').html(response?.message);
response?.status === 'success' && $('.response-message').addClass('text-success') || $('.response-message').addClass('text-danger');
$('.response-message').show();
$('.response-message').removeClass('d-none');
document.getElementById("registrationForm").reset();
setTimeout(function() {
$('.response-message').hide();
}, 5000);
}
});
}
})
}
</script>
</body>
</html>В приведенном выше коде я добавил очень простую форму. Внизу я добавил jQuery для обработки запроса формы. Кроме того, проверка выполняется для указанных полей ввода. Для проверки я использовал плагин jQuery Validator. Здесь это используется для обработки проверки с помощью действия отправки формы. Вы можете создать для этого отдельный файл js и добавить в него часть скрипта. Затем вы можете подключить этот файл в этот файл представления.
Теперь перейдем к функциональной части, где мы будем обрабатывать запрос формы. Также мы сохраним данные формы в нашей таблице через модель.
Создание контроллера для обработки форм Ajax в CodeIgniter 4
Вернитесь к терминалу и создайте контроллер с помощью команды spark.
php spark make:controller AjaxControllerПосле создания контроллера давайте поместим в него приведенный ниже код.
AjaxController.php
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use App\Models\Ajaxform;
class AjaxController extends BaseController
{
/**
* Constructor
*/
public function __construct()
{
helper(['form', 'url']);
$this->ajaxForm = new Ajaxform();
}
/**
* Show Ajax Form
* @param NA
* @return view
*/
public function index()
{
return view('ajax-form');
}
/**
* Ajax Form Store Data
* @param NA
* @return response
*/
public function store()
{
$data = [
'name' => $this->request->getVar('name'),
'email' => $this->request->getVar('email'),
'password' => $this->request->getVar('password'),
'phone' => $this->request->getVar('phone'),
'address' => $this->request->getVar('address'),
];
$result = $this->ajaxForm->save($data);
if ($result) {
return $this->response->setJSON(['status' => 'success', 'message' => 'User registered successfully']);
}
return $this->response->setJSON(['status' => 'failed', 'message' => 'Failed to register']);
}
}
Позвольте мне объяснить приведенный выше код, прежде чем перейти к следующему шагу.
- Вверху я включил Модель (Ajaxform).
- Затем у нас есть конструктор. В функцию конструктора я включил вспомогательные функции CodeIgniter. Которые необходимы для обработки данных формы. Также я создал объект модели.
- Теперь перейдем к функции index(). В этой функции я загрузил представление, в котором мы уже создали форму.
- Наконец, у нас есть функция store(), которая обрабатывает данные формы и вставляет операцию через объект модели.
Вот и все, что у нас есть. Эти функции нуждаются в маршруте для запуска в браузере. Итак, добавим маршруты.
Создание маршрутов в CodeIgniter 4
Вы можете найти Routes.php в каталоге app/Config проекта. Теперь добавьте следующие маршруты.
Routes.php
$routes->get('ajax-form', 'AjaxController::index');
$routes->post('ajax-store', 'AjaxController::store');Теперь у нас есть готовый результат.
Проверка результатов обработки формы CodeIgniter AJAX
Запустите проект CodeIgniter 4 с помощью команды spark.
php spark serveТеперь зайдите в браузер, и вы получите результат, показанный ниже.
Если вы попытаетесь отправить форму без заполнения каких-либо полей, вы получите ошибки проверки.
Теперь попробуйте заполнить обязательные поля и повторно отправить форму. В результате вы получите успешный ответ, как показано ниже. Если результатом является ошибка, сообщение будет красным.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.