Laravel 9: Как создать CRUD-приложение с использованием Ajax в Laravel 9
Ajax — это метод веб-разработки, который в основном используется для синхронизации данных без загрузки страницы. Это уникальная функция, которая ощущается нами как одностраничное приложение. Ajax работает с данными без изменения поведения. Только это предотвращает обновление страницы после запуска события. Это очень полезно при работе с PHP-приложениями. Сегодня мы будем использовать Ajax в Laravel 9 для создания CRUD-приложения. Мы будем использовать jQuery для обработки событий.
Давайте посмотрим, что мы собираемся построить в этом посте.
Мы перечислим все посты. Если поста нет, он покажет сообщение.
Вы можете добавить новый пост, нажав кнопку «Create Post».
Будет проверка формы. Для этого я буду использовать jQuery Validator.
При отправке, если сообщение создано, оно закроет модальное окно и автоматически обновит таблицу.
Будет просмотр, редактирование и удаление действий. При просмотре он откроет сообщение в режиме только для чтения.
При редактировании откроется сообщение в режиме редактирования. Вы можете обновить содержимое.
После обновления он закроет модальное окно и обновит строки таблицы.
Точно так же действие удаления запросит подтверждение перед удалением. При успешном удалении он удалит данные из базы данных, а также из этой HTML-таблицы.
Итак, в этом посте мы рассмотрим все вышеперечисленные функции. Итак, приступим к посту.
Предпосылки
Перед созданием приложения Laravel 9 убедитесь в правильности приведенной ниже конфигурации.
- PHP >=8.0.2
- Composer
- Сервер Apache/Nginx
- Редактор кода VS (необязательно)
- MySQL (версия > 5)
Создадим приложение для Laravel 9 Ajax CRUD
Этот шаг не рекомендуется выполнять, если у вас уже есть настройка проекта. Если нет, создайте приложение с помощью приведенной ниже команды.
composer create-project --prefer-dist laravel/laravel blogДайте установке завершиться, а затем мы перейдем к следующему шагу.
Настройка базы данных для приложения Laravel 9
Создайте базу данных и перейдите в корень каталога проекта. Найдите файл .env и настройте базу данных, как показано ниже. Замените свои учетные данные в опции базы данных.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DATABASE_NAME
DB_USERNAME=DATABASE_USERNAME
DB_PASSWORD=DATABASE_PASSWORDДалее вам нужно создать модель, миграцию и контроллер.
Создайте модель, миграцию и контроллер
Мы создадим контроллер ресурсов, чтобы у него были методы CRUD по умолчанию.
php artisan make:model Post -mcrtimestamp_create_posts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title')->nullable();
$table->text('description')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};Мы добавили несколько полей в таблицу. Теперь запустите миграцию, чтобы получить таблицу.
php artisan migrateЗатем вы должны добавить массовое назначение в модель.
Добавить массовое назначение в модель Laravel 9
Перейдите к модели и добавьте заполняемое свойство, как показано ниже.
Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title',
'description'
];
}Именно для этого. Теперь перейдите к контроллеру для реализации функций.
Функциональность Laravel 9 Ajax CRUD
Для операций Ajax CRUD вам нужно будет добавить функциональность CRUD в контроллер. Поэтому добавьте приведенный ниже код.
PostController.php
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$posts = Post::orderBy('id', 'desc')->get();
return view('posts.index', compact('posts'));
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$post = Post::updateOrCreate(
[
'id' => $request->postId
],
[
'title' => $request->title,
'description' => $request->description
]
);
if ($post) {
return response()->json(['status' => 'success', 'data' => $post]);
}
return response()->json(['status' => 'failed', 'message' => 'Failed! Post not created']);
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show(Post $post)
{
if ($post) {
return response()->json(['status' => 'success', 'data' => $post]);
}
return response()->json(['status' => 'failed', 'message' => 'No post found']);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
$post->delete();
return response()->json(['status' => 'success', 'data' => $post]);
}
}Соответственно вам нужно будет добавить маршруты.
Добавление маршрутов для Laravel 9 Ajax CRUD
Перейдите к web.php и добавьте указанные ниже маршруты.
<?php
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;
Route::resource('posts', PostController::class);Далее вам нужно создать представления для обработки данных и форм.
Создание представлений для Ajax CRUD
Создайте следующий файл блейда в папке представлений.
- master.blade.php
- index.blade.php
После создания файла лезвий давайте начнем с добавления основного макета в файл master.blade.php
master.blade.php
<!doctype html>
<html lang="en">
<head>
<title>Laravel 9 CRUD Application @yield('title')</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<style>
.error {
color: #ca0505;
}
</style>
</head>
<body>
<div class="container py-5">
@yield('content')
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ asset('assets/js/script.js') }}"></script>
</body>
</html>В footer я добавил скрипт для обработки AJAX. Итак, для этого я создал отдельный файл с именем script.js в папке /public/.
index.blade.php
@extends('posts.master')
@section('content')
@section('title') | Posts Listing @endsection
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-9 col-12">
<h3 class="text-center"> Laravel 9 Ajax CRUD </h3>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 text-end">
<a href="jаvascript:void(0)" id="create-post-btn" class="btn btn-primary"> Create Post </a>
</div>
</div>
<div class="card my-3">
<table class="table" id="postsTable">
<thead>
<tr>
<th width="10%">Id</th>
<th width="20%">Title</th>
<th width="30%">Description</th>
<th width="20%">Action</th>
<tr>
</thead>
<tbody>
@forelse ($posts as $post)
<tr id="post_{{$post->id}}">
<td>{{ $post->id }}</td>
<td>{{ $post->title }}</td>
<td>{{ $post->description }}</td>
<td>
<a href="jаvascript:void(0)" data-id="{{$post->id}}" title="View" class="btn btn-sm btn-info btn-view"> View </a>
<a href="jаvascript:void(0)" data-id="{{$post->id}}" title="Edit" class="btn btn-sm btn-success btn-edit"> Edit </a>
<a href="jаvascript:void(0)" data-id="{{$post->id}}" title="Delete" class="btn btn-sm btn-danger btn-delete"> Delete </a>
</td>
</tr>
@empty
<tr>
<td colspan="4">
<p class="text-danger text-center"> No post found! </p>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- modal -->
<div class="modal fade" id="postModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content ">
<form method="post" id="postForm">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"> AJAX CRUD Application</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text" name="title" class="form-control" id="title" placeholder="Post Title">
</div>
<div class="mb-3">
<label for="description" class="form-label">Body</label>
<textarea class="form-control" name="description" placeholder="Description" id="description" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
@endsectionДобавьте приведенный ниже фрагмент в файл script.js.
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).ready(function () {
// create post
$('#create-post-btn').click(function() {
$('.error').remove();
$('#postId').remove();
$('#postModal #modalTitle').text('Create Post');
$('#postForm')[0].reset();
$('#postModal').modal('toggle');
});
// form validate and submit
$('#postForm').validate({
rules: {
title: 'required',
description: 'required',
},
messages: {
title: 'Please enter the title',
description: 'Please enter the description',
},
submitHandler: function(form) {
const id = $('input[name=postId]').val();
const formData = $(form).serializeArray();
$.ajax({
url: 'posts',
type: 'POST',
dаta: formData,
success: function(response) {
if (response && response.status === 'success') {
// clear form
$('#postForm')[0].reset();
// toggle modal
$('#postModal').modal('toggle');
$('#postsTable p').empty();
const data = response.data;
if (id) {
$("#post_"+id+" td:nth-child(2)").html(data.title);
$("#post_"+id+" td:nth-child(3)").html(data.description);
}
else {
$('#postsTable').prepend(`<tr id=${'post_'+data.id}><td>${data.id}</td><td>${data.title}</td><td>${data.description}</td><td>
<a href="jаvascript:void(0)" data-id=${data.id} title="View" class="btn btn-sm btn-info btn-view"> View </a>
<a href="jаvascript:void(0)" data-id=${data.id} title="Edit" class="btn btn-sm btn-success btn-edit"> Edit </a>
<a href="jаvascript:void(0)" data-id=${data.id} title="Delete" class="btn btn-sm btn-danger btn-delete"> Delete </a></td></tr>`);
}
}
}
});
}
})
});
// view button click
$('.btn-view').click(function() {
const id = $(this).data('id');
$('label.error').remove();
$('input[name=title]').removeClass('error');
$('textarea[name=description]').removeClass('error');
$('input[name=title]').attr('disabled', 'disabled');
$('textarea[name=description]').attr('disabled', 'disabled');
$('#postModal button[type=submit]').addClass('d-none');
$.ajax({
url: `posts/${id}`,
type: 'GET',
success: function(response) {
if (response && response.status === 'success') {
const data = response.data;
$('#postModal #modalTitle').text('Post Detail');
$('#postModal input[name=title]').val(data.title);
$('#postModal textarea[name=description]').val(data.description);
$('#postModal').modal('toggle');
}
}
})
});
// edit button click
$('.btn-edit').click(function() {
const id = $(this).data('id');
$('label.error').remove();
$('input[name=title]').removeClass('error');
$('input[name=title]').after('<input type="hidden" name="postId" value="'+id+'" />')
$('textarea[name=description]').removeClass('error');
$('input[name=title]').removeAttr('disabled');
$('textarea[name=description]').removeAttr('disabled');
$('#postModal button[type=submit]').removeClass('d-none');
$.ajax({
url: `posts/${id}`,
type: 'GET',
success: function(response) {
if (response && response.status === 'success') {
const data = response.data;
$('#postModal #modalTitle').text('Update Post');
$('#postModal input[name=title]').val(data.title);
$('#postModal textarea[name=description]').val(data.description);
$('#postModal').modal('toggle');
}
}
})
});
// delete button click
$('.btn-delete').click(function() {
const id = $(this).data('id');
if (id) {
const result = window.confirm('Do you want to delete?');
if (result) {
$.ajax({
url: `posts/${id}`,
type: 'DELETE',
success: function(response) {
if (response && response.status === 'success') {
const data = response.data;
$(`#post_${data.id}`).remove();
}
}
});
}
else {
console.log('error', 'Post not found');
}
}
});Вот и все функциональные возможности Ajax CRUD. Теперь запустите приложение, чтобы увидеть результат.
Комментариев 1
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.