1. Журнал
  2. Решения и советы
  3. Веб-фреймворки
  4. Laravel
0 ∞ 1

Создание CRUD-операций на AJAX и Laravel 8: руководство для начинающих с примерами

Создание CRUD-операций на AJAX и Laravel – важный навык для разработчиков, который значительно упрощает взаимодействие с базой данных и улучшает пользовательский опыт. В статье рассматривается пошаговое руководство по созданию этих операций с использованием технологий AJAX и Laravel 8, которые делают процесс быстрым и эффективным.

Вы найдете примеры кода, которые помогут разобраться в процессе и интегрировать их в ваши проекты. Узнайте, как легко управлять данными без необходимости перезагружать страницу, улучшая производительность вашего веб-приложения.

Обновлено: Сергей Бензенкоавтор материала

Содержание

Введение

Мы создадим операции CRUD для вывода ошибок валидации, поиска, сортировки, разбиения на страницы. Для ввода и редактирования данных мы создадим всплывающее окно на основе фреймворка Bootstrap. Приведенное в этом руководстве приложение CRUD создает посты с заголовками и описаниями без обновления и перезагрузки страницы.

Приступим к поэтапному созданию набора операций CRUD на AJAX и Laravel 8.

Введение
Изучите PHP на курсах по разработке на PHP и создавайте динамичные веб-приложения!

Сначала установим Laravel с помощью простой команды:

composer create-project --prefer-dist laravel/laravel laravelajax

Вносим конфигурацию базы данных в файл переменных окружения

Создайте новую базу данных в phpMyAdmin и внесите имя базы данных, пользователя и пароль в .env файл:

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=имя базы данных

DB_USERNAME=имя пользователя

DB_PASSWORD=пароль пользователя

Создаем модель и файл миграции

Для автоматического создания модели и файла миграции используйте команду:

php artisan make:model Post –m

После выполнения данной команды вы получите один файл модели (Post.php) и один файл миграции.

Миграция: обновите столбцы таблицы в файле миграции, как показано ниже. В нашем примере файл находится здесь – database\migrations\2021_03_21_061250_create_posts_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Запуск миграции
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title')->nullable();
            $table->longText('description')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Отмена миграций
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}
Руководство по Laravel 8 для начинающих: как создать своё первое приложение

После обновления выполните команду:

php artisan migrate

Модель: в файл 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 8 CRUD в файле routes/web.php, как показано ниже:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;

Route::resource('posts', PostController::class);

Route::get('/', function () {
    return view('welcome');
});

Создаем контроллер

Перейдем к созданию контроллера PostController с помощью команды:

php artisan make:controller PostController --resource

После создания файла контроллера (app/Http/Controllers/PostController.php) добавьте в него приведенные ниже методы:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
  /**
   * Вывод списка постов
   *
   * @return \Illuminate\Http\Response
   */
  public function index()
  {
      $posts = Post::all();

      return view('posts', ['posts' => $posts]);
  }

  /**
   * Сохранение новой записи
   *
   * @param  \Illuminate\Http\Request  $request
   * @return \Illuminate\Http\Response
   */
  public function store(Request $request)
  {
      $request->validate([
        'title'       => 'required|max:255',
        'description' => 'required',
      ]);

      $post = Post::updateOrCreate(['id' => $request->id], [
                'title' => $request->title,
                'description' => $request->description
              ]);

      return response()->json(['code'=>200, 'message'=>'Запись успешно создана','data' => $post], 200);

  }

  /**
   * Вывод определенного поста
   *
   * @param  int  $id
   * @return \Illuminate\Http\Response
   */
  public function show($id)
  {
      $post = Post::find($id);

      return response()->json($post);
  }

  /**
   * Удаление поста из базы данных
   *
   * @param  int  $id
   * @return \Illuminate\Http\Response
   */
  public function destroy($id)
  {
    $post = Post::find($id)->delete();

    return response()->json(['success'=>'Запись успешно удалена']);
  }
}
Проверка выполнения AJAX запроса POST в Laravel

Создаем шаблон Blade

Для начала создайте файл posts.blade.php, он должен располагаться по адресу resources\views\posts.blade.php. Затем добавьте в него следующий код:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

</head>
  <style>
  .alert-message {
    color: red;
  }
</style>
<body>

<div class="container">
    <h2 style="margin-top: 12px;" class="alert alert-success">Ajax CRUD with Laravel App -
       <a href="https://www.codingdriver.com" target="_blank" >CodingDriver</a>
     </h2><br>
     <div class="row">
       <div class="col-12 text-right">
         <a href="javascript:void(0)" class="btn btn-success mb-3" id="create-new-post" onclick="addPost()">Add Post</a>
       </div>
    </div>
    <div class="row" style="clear: both;margin-top: 18px;">
        <div class="col-12">
          <table id="laravel_crud" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                @foreach($posts as $post)
                <tr id="row_{{$post->id}}">
                   <td>{{ $post->id  }}</td>
                   <td>{{ $post->title }}</td>
                   <td>{{ $post->description }}</td>
                   <td><a href="javascript:void(0)" data-id="{{ $post->id }}" onclick="editPost(event.target)" class="btn btn-info">Edit</a></td>
                   <td>
                    <a href="javascript:void(0)" data-id="{{ $post->id }}" class="btn btn-danger" onclick="deletePost(event.target)">Delete</a></td>
                </tr>
                @endforeach
            </tbody>
          </table>
       </div>
    </div>
</div>
</body>
</html>
Простой пример отправки формы в Laravel через AJAX jQuery

Добавим модель

После последнего закрывающего тэга </div> вставьте модель. Это будет выглядеть следующим образом:

<div class="modal fade" id="post-modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <form name="userForm" class="form-horizontal">
               <input type="hidden" name="post_id" id="post_id">
                <div class="form-group">
                    <label for="name" class="col-sm-2">title</label>
                    <div class="col-sm-12">
                        <input type="text" class="form-control" id="title" name="title" placeholder="Enter title">
                        <span id="titleError" class="alert-message"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2">Description</label>
                    <div class="col-sm-12">
                        <textarea class="form-control" id="description" name="description" placeholder="Enter description" rows="4" cols="50">
                        </textarea>
                        <span id="descriptionError" class="alert-message"></span>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" onclick="createPost()">Save</button>
        </div>
    </div>
  </div>
</div>

Добавление AJAX запроса через Jquery

Дополним CRUD набор на Laravel 8 и AJAX приведенным ниже кодом – после закрывающего тэга </body>:

<script>
  $('#laravel_crud').DataTable();

  function addPost() {
    $("#post_id").val('');
    $('#post-modal').modal('show');
  }

  function editPost(event) {
    var id  = $(event).data("id");
    let _url = `/posts/${id}`;
    $('#titleError').text('');
    $('#descriptionError').text('');
    
    $.ajax({
      url: _url,
      type: "GET",
      success: function(response) {
          if(response) {
            $("#post_id").val(response.id);
            $("#title").val(response.title);
            $("#description").val(response.description);
            $('#post-modal').modal('show');
          }
      }
    });
  }

  function createPost() {
    var title = $('#title').val();
    var description = $('#description').val();
    var id = $('#post_id').val();

    let _url     = `/posts`;
    let _token   = $('meta[name="csrf-token"]').attr('content');

      $.ajax({
        url: _url,
        type: "POST",
        data: {
          id: id,
          title: title,
          description: description,
          _token: _token
        },
        success: function(response) {
            if(response.code == 200) {
              if(id != ""){
                $("#row_"+id+" td:nth-child(2)").html(response.data.title);
                $("#row_"+id+" td:nth-child(3)").html(response.data.description);
              } else {
                $('table tbody').prepend('<tr id="row_'+response.data.id+'"><td>'+response.data.id+'</td><td>'+response.data.title+'</td><td>'+response.data.description+'</td><td><a href="javascript:void(0)" data-id="'+response.data.id+'" onclick="editPost(event.target)" class="btn btn-info">Edit</a></td><td><a href="javascript:void(0)" data-id="'+response.data.id+'" class="btn btn-danger" onclick="deletePost(event.target)">Delete</a></td></tr>');
              }
              $('#title').val('');
              $('#description').val('');

              $('#post-modal').modal('hide');
            }
        },
        error: function(response) {
          $('#titleError').text(response.responseJSON.errors.title);
          $('#descriptionError').text(response.responseJSON.errors.description);
        }
      });
  }

  function deletePost(event) {
    var id  = $(event).data("id");
    let _url = `/posts/${id}`;
    let _token   = $('meta[name="csrf-token"]').attr('content');

      $.ajax({
        url: _url,
        type: 'DELETE',
        data: {
          _token: _token
        },
        success: function(response) {
          $("#row_"+id).remove();
        }
      });
  }

</script>

Итак, создание набора операций CRUD с нуля на Laravel 8 и AJAX завершено. Дайте знать в комментариях, если у вас возникли какие-то проблемы. Возможно, вам также пригодится руководство для начинающих по созданию CRUD на фреймворке Laravel 8.

Сергей Бензенкоавтор-переводчик статьи «September 14, 2020laravel 8 Ajax CRUD Tutorial with Example for Beginners»

Комментарии

Оставьте свой комментарий
Артем К.

Спасибо, отличный материал, но...

После всех действий описанных в статье сначала JS выдавал такую ошибку:
Uncaught TypeError: Cannot read property 'fn' of undefined, после удалось от нее избавиться изменив порядок подключения библиотек на :

, теперь при обновлении страницы JS не ругается, данные из БД отображаются в таблице (заполнял из в ручную), при попытке создать новую запись или отредактировать уже созданную, получаю следующие ошибки:
POST http://127.0.0.1:8005/posts 500 (Internal Server Error) и
posts:152 Uncaught TypeError: Cannot read property 'title' of undefined

Помогите плз. с решением

Ответить