Tự học Laravel: (34) MANY-TO-MANY RELATION UI

Last time, I implemented DB and model of many-to-many relation, and confirmed the operation with tinker. This time, I would like to handle many-to-many relations from the article creation screen and editing screen.

CONTROLLER

Modify ArticlesController.php

<?php
// app/Http/Controllers/ArticlesController.php
namespace App\Http\Controllers;
 
use App\Article;
use App\Tag;
use App\Http\Requests\ArticleRequest;
 
class ArticlesController extends Controller {
 
    ...
 
    public function create() {
        $tag_list = Tag::pluck('name', 'id'); // ①
 
        return view('articles.create', compact('tag_list'));
    }
 
    public function store(ArticleRequest $request) {
        $article = Auth::user()->articles()->create($request->validated());
        $article->tags()->attach($request->input('tags')); // ②
 
        return redirect()->route('articles.index')
            ->with('message', 'Create Ok');
    }
 
    public function edit(Article $article) {
        $tag_list = Tag::pluck('name', 'id'); // ③
 
        return view('articles.edit', compact('article', 'tag_list'));
    }
 
    public function update(Article $article, ArticleRequest $request) {
        $article->update($request->validated());
        $article->tags()->sync($request->input('tags')); // ④ 
 
        return redirect()->route('articles.show', [$article->id])
            ->with('message', 'Update Ok');
    }
 
    ...
 
}
  1. In 1 create() and 3 edit(), fixed the list of tag name and id to be passed to View.
  2. In the store(), the tags passed in the request are added to the tag relation by the attach() method.
  3. In update(), the tags passed in the request are synchronized with the tag relation in the sync() method. The sync() method adds and deletes so that the data in the article_tag table is only the one of the id passed in the argument.

VIEW

Modify the form view used for creating new articles and editing.

// resources/views/articles/form.blade.php
 
...
 
<div class="form-group">
    {!! Form::label('published_at', 'Publish On:') !!}
    {!! Form::input('date', 'published_at', $published_at, ['class' => 'form-control']) !!}
</div>
 
<div class="form-group">
    {!! Form::label('tags', 'Tags:') !!}
    {!! Form::select('tags[]', $tag_list, null, ['class' => 'form-control', 'multiple']) !!}
</div>
 
<div class="form-group">
    {!! Form::submit($submitButton, ['class' => 'btn btn-primary form-control']) !!}
</div>

Added select tag. In order to allow multiple selection of select tags, use parentheses for the bind name to make it ‘tags[]’ and put ‘multiple’ in the option.

Next, modify the view for article display.

// resources/views/articles/show.blade.php
 
@extends('layout')
 
@section('content')
    <h1>{{ $article->title }}</h1>
 
    <hr/>
 
    <article>
        <div class="body">{{ $article->body }}</div>
    </article>
 
    @unless ($article->tags->isEmpty())
        <h5>Tags:</h5>
        <ul>
            @foreach($article->tags as $tag)
                <li>{{ $tag->name }}</li>
            @endforeach
        </ul>
    @endunless
 
    @auth
        <a href="{{ route('articles.edit', ['id' => $article->id]) }}" class="btn btn-primary">
          Update
        </a>
 
        {!! delete_form(route('articles.destroy', ['id' => $article->id]), 'Delete') !!}
    @endauth
@endsection

If the article has a tag, it has been modified to display the tag list.

Now you can handle tags for creating, editing, and viewing articles. Please check the operation.

FINALLY

Thank you for reading “First Time Laravel”. Serialization will be the final in this time. I think that I could get used to the basic usage of Laravel through the practice of implementing the CRUD function of the blog. It would be nice if you could convey the charm of Laravel and think it would be possible for you. After that, let’s actually do development, face problems, investigate them, go ahead while solving them.

Source: https://laravel10.wordpress.com

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.