기록에 소위 슬러그(게시물, 페이지 등)가 필요한 프로젝트나 블로그에서 작업하는 경우 제목을 입력한 직후에 슬러그를 생성하는 것이 편리합니다. 이 기사에서는 AJAX 및 하나의 Laravel 패키지의 도움으로.

첫째, 우리가 여기서 하는 일. 다음은 예입니다.

페이지를 추가할 양식이 있으며 제목 입력을 마치면 Slug 필드가 자동 생성되도록 하는 것이 목표입니다.

뿐만 아니라 슬러그는 제목이 같더라도 모든 게시물에 대해 고유해야 합니다.

1단계. 블레이드 생성 양식

resources/views/admin/pages/create.blade.php가 어떻게 생겼는지 보여드리겠습니다. 정확히 말하면 제목과 슬러그의 두 필드를 담당하는 부분입니다.

<div class="form-group">
    <label for="title">Title*</label>
    <input type="text" id="title" name="title" class="form-control">
</div>
<div class="form-group">
    <label for="slug">Slug*</label>
    <input type="text" id="slug" name="slug" class="form-control">
</div>

따라서 코드는 간단하며 여기에 설명할 것이 없습니다. 이제 제목 값이 변경될 때 실행되는 JavaScript를 추가해 보겠습니다.

2단계. 제목 변경 시 AJAX 호출

"메인"Blade 레이아웃 파일에는 JavaScript를 다른 Blade 템플릿에 추가할 수 있는 특별한 @yield('scripts') 코드가 있습니다. 이것이 바로 우리가 할 일입니다. 다음 코드를 페이지/create.blade.php 하단에 추가합니다.

@section('scripts')
<script>
  $('#title').change(function(e) {
    $.get('{{ route('pages.check_slug') }}', 
      { 'title': $(this).val() }, 
      function( data ) {
        $('#slug').val(data.slug);
      }
    );
  });
</script>
@endsection

이제 pages.check_slug 경로 뒤에 논리를 생성해야 합니다.

3단계. 슬러그를 반환하는 경로/컨트롤러

먼저 route/web.php에 다음 행을 추가합니다.

Route::get('pages/check_slug', 'PagesController@check_slug')
  ->name('pages.check_slug');

다음으로 app/Http/Controllers/PagesController 메서드 check_slug()를 만듭니다. Laravel의 str_slug() 도우미를 사용하여 간단한 버전부터 시작하겠습니다.

public function check_slug(Request $request)
{
    $slug = str_slug($request->title);
    return response()->json(['slug' => $slug]);
}

간단하죠? 우리는 슬러그를 만들고 그것을 반환합니다. 그것으로 튜토리얼이 끝날 수도 있지만, 한 가지 중요한 규칙을 잊었습니다. 슬러그는 고유해야 합니다. 그것을 확인하는 방법?

4단계. 슬러그를 독특하게 만들기

뿐만 아니라 고유성을 확인할 뿐만 아니라 슬러그 끝에 -1, -2, -3 및 기타 숫자를 자동으로 추가하여 새로운 고유 번호를 생성해야 합니다.

이를 위해 나는 바퀴를 재발명하지 않고 기존 패키지를 유창하게 사용하기로 결정했습니다. 시장에 나와 있는 유일한 슬러그 관련 패키지는 아니지만 데이터베이스에 저장하지 않고 슬러그를 생성하는 매우 유용한(우리의 경우) 기능이 있습니다.

다음 명령으로 패키지를 설치합니다.

composer require cviebrock/eloquent-sluggable

다음으로 우리는 Model app/Page.php를 "slugable"하게 만들 준비가 필요합니다.

use Cviebrock\EloquentSluggable\Sluggable;

class Page extends Model
{
    use Sluggable;

    /**
     * Return the sluggable configuration array for this model.
     *
     * @return array
     */
    public function sluggable()
    {
        return [
            'slug' => [
                'source' => 'title'
            ]
        ];
    }
}

페이지 데이터베이스 테이블의 제목 필드에서 슬러그 필드를 생성하도록 정의하는 메소드를 만들었습니다.

이제 마지막 단계로 PagesController에서 슬러그를 생성하는 기존의 "간단한"방법을 대체할 수 있습니다.

use Cviebrock\EloquentSluggable\Services\SlugService;

public function check_slug(Request $request)
{
    // Old version: without uniqueness
    $slug = str_slug($request->title);

    // New version: to generate unique slugs
    $slug = SlugService::createSlug(Page::class, 'slug', $request->title);

    return response()->json(['slug' => $slug]);
}

그리고 그게 다야!