samedi 8 juin 2019

Formulaire Laravel/Bootstrap optimisations

Here my best solution for manage :

  • Store and Update submission in same form
  • Load form with DB data on first load
  • Load form with request data for nexts loads (with errors)

form.blade.php :

<!-- Display errors -->
@if ($errors->any())
    <div class="alert alert-danger">
        <ul style="margin:0">
            @foreach ($errors->all() as $error)
                <li></li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Store/Update Form -->
<form method="post" action="">
    @if($post->id) @method('put') @endif
    @csrf

    <!-- Input -->
    <div class="form-group">
        <label>Titre</label>
        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="" >
    </div>

    <!-- Textarea -->
    <div class="form-group">
        <label>Contenu</label>
        <textarea name="content" rows="6" class="form-control @error('content') is-invalid @enderror">{!! count(old()) === 0 ? $post->content : old('content') !!}</textarea>
    </div>

    <!-- Checkbox -->
    <div class="form-group">
        <label>
            <input type="hidden" name="online" value="0">
            <input type="checkbox" name="online" value="1" class="@error('online') is-invalid @enderror" >
            En ligne ?
        </label>
    </div>

    <!-- Select (single value) -->
    <div class="form-group">
        <label>Catégorie</label>
        <select name="category_id" class="form-control @error('category_id') is-invalid @enderror">
            <option value=""></option>
            @foreach($categories as $category)
                <option value="" ></option>
            @endforeach
        </select>
    </div>

    <!-- Select (multiples values) -->
    <div class="form-group">
        <label>Tags</label>
        <input type="hidden" name="tags" value="">
        <select name="tags[]" class="form-control @error('tags') is-invalid @enderror" multiple="true">
            @foreach($tags as $tag)
                <option value="" ></option>
            @endforeach
        </select>
    </div>

    <button class="btn btn-primary" type="submit">Sauvegarder</button>
    <a class="btn btn-light" href="">Annuler</a>
</form>

PostsController.php :

<?php

namespace App\Http\Controllers;

use App\Post;
use App\Http\Requests\EditPostRequest;

class PostsController extends Controller
{
    public function index() {
        $posts = Post::with('category')->get();
        return view('posts.index', compact('posts'));
    }

    public function create() {
        $post = new Post;
        $tags = $post->getTags();
        $categories = $post->getCategories();
        return view('posts.create', compact('post', 'tags', 'categories'));
    }

    public function store(EditPostRequest $request) {
        Post::create($request->all());
        return redirect(route('posts.index'));
    }

    public function edit($slug) {
        $post = Post::where('slug', $slug)->first();
        $tags = $post->getTags();
        $categories = $post->getCategories();
        return view('posts.edit', compact('post', 'tags', 'categories'));
    }

    public function update($slug, EditPostRequest $request) {
        $post = Post::where('slug', $slug)->first();
        $post->update($request->all());
        return redirect(route('posts.edit', $post));
    }
}

EditPostRequest.php :

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class EditPostRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }
    public function rules()
    {
        return [
            'title'       => 'required|min:5|max:255',
            'content'     => 'required|min:5|max:1000',
            'category_id' => 'required'
        ];
    }
}

Post.php (Model)

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use App\Tag;

class Post extends Model
{
    protected $fillable = ['title', 'content', 'online', 'category_id', 'tags'];

    public function getRouteKey() {
        return $this->slug;
    }

    public function category() {
        return $this->belongsTo('App\Category');
    }

    public function tags() {
        return $this->belongsToMany('App\Tag');
    }

    // Only used for the view
    public function getTags() {
        $tags = array();
        foreach(Tag::get() as $tag) {
            $tags[] = (object) array(
                'id' => $tag->id,
                'name' => $tag->name,
                'selected' => (count(old()) === 0 ? $this->tags->contains('id', $tag->id) : is_array(old('tags')) && in_array($tag->id, old('tags'))) ? 'selected' : ''
            );
        }
        return $tags;
    }

    // Only used for the view
    public function getCategories() {
        $categories = array();
        foreach(Category::get() as $cat) {
            $categories[] = (object) array(
                'id' => $cat->id,
                'name' => $cat->name,
                'selected' => (count(old()) === 0 ? ($this->category ? $this->category->id : '') : old('category_id')) == $cat->id ? 'selected' : ''
            );
        }
        return $categories;
    }

    public function setTagsAttribute($values) {
        if ($values === null) {
            $values = array();
        }
        return $this->tags()->sync($values);
    }

    public function setTitleAttribute($value) {
        $this->attributes['title'] = $value;
        $this->attributes['slug'] = $this->toSlug($value);
    }

    private function toSlug($str){
        return mb_strtolower(
            preg_replace(
                array(
                    '/[^a-zA-Z0-9 \'-]/',
                    '/[ -\']+/',
                    '/^-|-$/'
                ),
                array('', '-', ''),
                $this->toRemoveAccent($str)
            )
        );
    }

    private function toRemoveAccent($str)
    {
        $a = array('À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ',  'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'ß', 'à', 'á', 'â', 'ã', 'ä', 'å', 'æ',  'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'î', 'ï', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'ÿ', 'Ā', 'ā', 'Ă', 'ă', 'Ą', 'ą', 'Ć', 'ć', 'Ĉ', 'ĉ', 'Ċ', 'ċ', 'Č', 'č', 'Ď', 'ď', 'Đ', 'đ', 'Ē', 'ē', 'Ĕ', 'ĕ', 'Ė', 'ė', 'Ę', 'ę', 'Ě', 'ě', 'Ĝ', 'ĝ', 'Ğ', 'ğ', 'Ġ', 'ġ', 'Ģ', 'ģ', 'Ĥ', 'ĥ', 'Ħ', 'ħ', 'Ĩ', 'ĩ', 'Ī', 'ī', 'Ĭ', 'ĭ', 'Į', 'į', 'İ', 'ı', 'IJ',  'ij',  'Ĵ', 'ĵ', 'Ķ', 'ķ', 'Ĺ', 'ĺ', 'Ļ', 'ļ', 'Ľ', 'ľ', 'Ŀ', 'ŀ', 'Ł', 'ł', 'Ń', 'ń', 'Ņ', 'ņ', 'Ň', 'ň', 'ʼn', 'Ō', 'ō', 'Ŏ', 'ŏ', 'Ő', 'ő', 'Œ',  'œ',  'Ŕ', 'ŕ', 'Ŗ', 'ŗ', 'Ř', 'ř', 'Ś', 'ś', 'Ŝ', 'ŝ', 'Ş', 'ş', 'Š', 'š', 'Ţ', 'ţ', 'Ť', 'ť', 'Ŧ', 'ŧ', 'Ũ', 'ũ', 'Ū', 'ū', 'Ŭ', 'ŭ', 'Ů', 'ů', 'Ű', 'ű', 'Ų', 'ų', 'Ŵ', 'ŵ', 'Ŷ', 'ŷ', 'Ÿ', 'Ź', 'ź', 'Ż', 'ż', 'Ž', 'ž', 'ſ', 'ƒ', 'Ơ', 'ơ', 'Ư', 'ư', 'Ǎ', 'ǎ', 'Ǐ', 'ǐ', 'Ǒ', 'ǒ', 'Ǔ', 'ǔ', 'Ǖ', 'ǖ', 'Ǘ', 'ǘ', 'Ǚ', 'ǚ', 'Ǜ', 'ǜ', 'Ǻ', 'ǻ', 'Ǽ',  'ǽ',  'Ǿ', 'ǿ');
        $b = array('A', 'A', 'A', 'A', 'A', 'A', 'AE', 'C', 'E', 'E', 'E', 'E', 'I', 'I', 'I', 'I', 'D', 'N', 'O', 'O', 'O', 'O', 'O', 'O', 'U', 'U', 'U', 'U', 'Y', 's', 'a', 'a', 'a', 'a', 'a', 'a', 'ae', 'c', 'e', 'e', 'e', 'e', 'i', 'i', 'i', 'i', 'n', 'o', 'o', 'o', 'o', 'o', 'o', 'u', 'u', 'u', 'u', 'y', 'y', 'A', 'a', 'A', 'a', 'A', 'a', 'C', 'c', 'C', 'c', 'C', 'c', 'C', 'c', 'D', 'd', 'D', 'd', 'E', 'e', 'E', 'e', 'E', 'e', 'E', 'e', 'E', 'e', 'G', 'g', 'G', 'g', 'G', 'g', 'G', 'g', 'H', 'h', 'H', 'h', 'I', 'i', 'I', 'i', 'I', 'i', 'I', 'i', 'I', 'i', 'IJ', 'ij', 'J', 'j', 'K', 'k', 'L', 'l', 'L', 'l', 'L', 'l', 'L', 'l', 'L', 'l', 'N', 'n', 'N', 'n', 'N', 'n', 'n', 'O', 'o', 'O', 'o', 'O', 'o', 'OE', 'oe', 'R', 'r', 'R', 'r', 'R', 'r', 'S', 's', 'S', 's', 'S', 's', 'S', 's', 'T', 't', 'T', 't', 'T', 't', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'W', 'w', 'Y', 'y', 'Y', 'Z', 'z', 'Z', 'z', 'Z', 'z', 's', 'f', 'O', 'o', 'U', 'u', 'A', 'a', 'I', 'i', 'O', 'o', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'U', 'u', 'A', 'a', 'AE', 'ae', 'O', 'o');
        return str_replace($a, $b, $str);
    }
}

Routes.php :

<?php

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

// Posts
Route::get('/posts', 'PostsController@index')->name('posts.index');
Route::get('/posts/create', 'PostsController@create')->name('posts.create');
Route::post('/posts/create', 'PostsController@store')->name('posts.store');
Route::get('/posts/{slug}/edit', 'PostsController@edit')->name('posts.edit');
Route::put('/posts/{slug}/edit', 'PostsController@update')->name('posts.update');

Consider the inputs "hidden" in the view who allow to resolve many problems on submissions. Consider too following methods :

  • getTags()
  • getCategory()

Until now it's the best solution I had find to simplify the view and the controller.

If someone had some bests practices, I'll be happy to read him.

Thanks everyone ;-)



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire