ラーラーベル8でシンプルなcrudを作る

目次

Introduction

Overview

Prerequisite

Set up the project

The database

Model and migration

Dummy data

The Controller

Views

Routes

Conclusion

導入
Laravelは、表現的でエレガントな構文でWebアプリケーションフレームワークです.Webアプリを構築するための素晴らしいツールです.TailWindCSSは、あなたのマークアップで直接どんなデザインでも構築するために構成されることができる多くのクラスで詰め込まれるユーティリティ最初のCSSフレームワークです.このチュートリアルでは、これらのツールを使用して簡単なCRUDを構築します.この用語に精通していない場合は、単に永続的なストレージの4つの基本的な操作である作成、読み取り、更新、および削除を意味します.

概要
我々が構築しようとしているもののいくつかのスクリーンショット.
投稿リスト

ポストフォーム

ポストフォーム


前提条件
私は、あなたがすでにあなたのPCにPHP、* *作曲家*とDBMS * * MySQL *を持っていると仮定します.

プロジェクトの設定
我々が必要とする最初のものは、新しいLaravelプロジェクトを作成することです.それはかなり簡単です、あなたの端末を開き、以下のコマンドを入力します.

composer create-project laravel/laravel laravel8-crud

その後、お気に入りのIDEまたはコードエディターでプロジェクトフォルダを開き、.env データベース名と資格情報を記入するファイルです.

DB_DATABASE=laravel8crud
DB_USERNAME=root
DB_PASSWORD=

我々は行く準備ができている.データベースの資格情報を設定した後、テーブルを作成し、いくつかのダミーデータを入力する必要があります.postというマイグレーションファイルを作成しましょう.

データベース
クリエイトアPost モデルとこのコマンドでの移行.

php artisan make:model Post -m

上記のコマンドを入力すると、Laravelは2つのファイルを作成します.最初のものはPost.php .

モデルと移行
アプリ/モデル/ポスト.PHP

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;
}

リトルアップデートPost.php ララベルを言うためにファイルが必要ですposts テーブルの列は、ユーザーが変更することができます.
アプリ/モデル/ポスト.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', 'content'];
}

2番目のファイルはXXXXKANE XXHARE XXXXX XXX XX CREATHERN PostsTHEテーブルのようなものです.PHP
データベース/migrations/XXXXRAN XXKINE XXXXXXXX .PHP

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

このファイルは私たちの構造を定義するのに役立ちますposts データベース内のテーブル.我々は、我々のニーズに合うようにそれを満たすつもりです.一つのポストにはtitle とcontent . ファイルの内容を以下のコードで更新します.
データベース/migrations/XXXXRAN XXKINE XXXXXXXX .PHP

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

移動し、工場や苗といくつかのダミーのポストを作成してみましょう.

ダミーデータ
工場を作成するには、プロジェクトのコマンドの下にコマンドを入力します.

php artisan make:factory PostFactory -m Post

使用する-m Post Laravelにポストモデル用のファクトリを生成するよう指示します.更新プログラムは、以下のコードが含まれています.
データベース/工場/ポストファクトリー.PHP

<?php

namespace Database\Factories;

use App\Models\Post;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Factories\Factory;

class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'title' => Str::title($this->faker->sentence()),
            'content' => $this->faker->text()
        ];
    }
}

Faker PHPライブラリを使用して、タイトルとコンテンツのランダムテキストを生成します.工場の後、我々はそれを使用する必要があります.以下のコマンドは私たちの仕事をするでしょう.

php artisan make:seeder PostSeeder

データベースの中に新しいファイルがありますPostSeeder.php . ちょうどそのコードを下記のコードで更新してください.
データベース/苗木/postseeder.PHP

<?php

namespace Database\Seeders;

use App\Models\Post;
use Illuminate\Database\Seeder;

class PostSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Post::factory(15)->create();
    }
}

私たちはほとんどデータベースを実行しています、我々がする必要があるすべては、我々の移行を実行して、偽のポストでデータベースをシードすることです.次の2つのコマンドを入力し、我々は行く準備が整いました.

php artisan migrate

php artisan db:seed --class=PostSeeder

私たちは15の偽のポストを持っているので、我々はロジックを処理するためのコントローラを作るつもりです.

コントローラ
以下のコマンドはリソースコントローラを作成し、LaravelにPOSTモデルを入力するよう指示します.

php artisan make:controller PostController --resource -m Post

次のコードでそのincludeを更新します.
アプリケーション/HTTP/コントローラ/ポストコントローラ.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::latest()->paginate(10);
        return view('posts.index', compact('posts'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('posts.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $data = $request->validate([
            'title' => 'required',
            'content' => 'required'
        ]);
        Post::create($data);

        return redirect()->route('posts.index')->with('success', 'Post created successfuly!');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        return view('posts.show', compact('post'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        return view('posts.edit', compact('post'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        $data = $request->validate([
            'title' => 'required',
            'content' => 'required'
        ]);

        $post->update($data);

        return redirect()->route('posts.index')->with('success', 'Post updated successfuly!');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        $post->delete();
        return redirect()->route('posts.index')->with('success', 'Post deleted successfuly!');
    }
}

上のコントローラのコードで何をするか説明しましょう.indexメソッドは投稿リストを表示するページを表します.他の方法はよく知られているので、私たちはより多くの説明を必要としないと思います.
我々はコントローラを終了して、我々は最終的にブラウザで結果を見るためにビューを作ることができます.2つのフォルダーを作成します.最初のフォルダ(レイアウト)で.

見解
アプリという名前のブレードファイルを作成します.ブレード.PHPでコードを入力します.
このファイルは私たちの基本的なレイアウトです.私たちはそれを拡張し、他のビューにその包含を使用します.ありがとうblade , テンプレートエンジン.
リソース/ビュー/レイアウト/アプリ.ブレード.PHP

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>@yield('title') - Laravel 8 CRUD</title>

    {{-- Tailwindcss --}}
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


</head>

<body>
    @yield('content')
</body>

</html>

番目のフォルダ(投稿)の中で、ファイルを作成しましょうindex.blade.php .
ファイルを下のコードで入力します.このファイルの中で何かを混乱させるか、理解していない場合は、それは私たちの投稿リストのためのループであり、create post page .
リソース/ビュー/投稿/インデックス.ブレード.PHP

@extends('layouts.app')
@section('title', 'Posts')
@section('content')
    <h1 class="text-center text-3xl mt-5 font-bold">Posts</h1>

     <div class="max-w-md ml-auto">
        <a href="{{ route('posts.create') }}"
            class="py-2 px-5 text-white rounded-md bg-indigo-600 shadow-md block md:inline-block">New</a>
    </div>

    @if (session('success'))
        <div class="alert flex flex-row items-center bg-green-200 p-5 rounded border-b-2 border-green-300 max-w-md mx-auto">
            <div
                class="alert-icon flex items-center bg-green-100 border-2 border-green-500 justify-center h-10 w-10 flex-shrink-0 rounded-full">
                <span class="text-green-500">
                    <svg fill="currentColor" viewBox="0 0 20 20" class="h-6 w-6">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </span>
            </div>
            <div class="alert-content ml-4">
                <div class="alert-title font-semibold text-lg text-green-800">
                    Success
                </div>
                <div class="alert-description text-sm text-green-600">
                    {{ session('success') }}
                </div>
            </div>
        </div>
    @endif

    <div class="flex flex-col justify-center items-center">
        @foreach ($posts as $post)
            <div class="w-full px-8 py-4 max-w-lg bg-white shadow-md rounded-lg my-5">
                <div class="flex justify-between">
                    <h2 class="text-gray-800 text-3xl font-semibold"><a
                            href="{{ route('posts.show', $post) }}">{{ $post->title }}</a></h2>
                    <div class="flex">
                        <a href="{{ route('posts.edit', $post) }}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                        </a>
                        <form action="{{ route('posts.destroy', $post) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
                <p class="mt-2 text-gray-600">{{ $post->content }}</p>
            </div>
        @endforeach
        <div>
            {{ $posts->links() }}
        </div>
    </div>

@endsection

私たちの投稿リストは準備ができているので、ページを作り、その中にフォームを追加します.フォームは、新しい投稿を作成するのに役立ちます.
リソース/ビュー/作成.ブレード.PHP

@extends('layouts.app')
@section('title', 'Create post')
@section('content')
    <h1 class="text-center text-3xl mt-5 font-bold">Create a post</h1>
    <div class="max-w-md mx-auto">
        <div class="py-6 px-8 mt-20 bg-white rounded shadow-xl">
            <form action="{{ route('posts.store') }}" method="POST">
                @csrf
                <div class="mb-6">
                    <label for="name" class="block text-gray-800 font-bold">Title:</label>
                    <input type="text" name="title" id="name" value="{{ old('title') }}" placeholder="Post title"
                        class="w-full border border-gray-300 py-2 pl-3 rounded mt-2 outline-none focus:ring-indigo-600 :ring-indigo-600" />
                    @error('title')
                        <p class="text-sm text-red-500 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="name" class="block text-gray-800 font-bold">Content:</label>
                    <textarea name="content" id="content"
                        class="w-full border border-gray-300 py-2 pl-3 rounded mt-2 outline-none focus:ring-indigo-600 :ring-indigo-600"
                        placeholder="The post content goes here" rows="5">{{ old('content') }}</textarea>
                    @error('content')
                        <p class="text-sm text-red-500 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <button type="submit"
                    class="cursor-pointer py-2 px-4 block mt-6 bg-indigo-500 text-white font-bold w-full text-center rounded">
                    Save</button>
            </form>
        </div>
    </div>
@endsection

我々は、我々のポストを編集するために、類似した形を必要とします.
リソース/ビュー/投稿/編集.ブレード.PHP

@extends('layouts.app')
@section('title', 'Edit post')
@section('content')
    <h1 class="text-center text-3xl mt-5 font-bold">Edit a post</h1>
    <div class="max-w-md mx-auto">
        <div class="py-6 px-8 mt-20 bg-white rounded shadow-xl">
            <form action="{{ route('posts.update', $post) }}" method="POST">
                @csrf
                <div class="mb-6">
                    <label for="name" class="block text-gray-800 font-bold">Title:</label>
                    <input type="text" name="title" id="name" value="{{ old('title', $post->title) }}"
                        placeholder="Post title"
                        class="w-full border border-gray-300 py-2 pl-3 rounded mt-2 outline-none focus:ring-indigo-600 :ring-indigo-600" />
                    @error('title')
                        <p class="text-sm text-red-500 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="name" class="block text-gray-800 font-bold">Content:</label>
                    <textarea name="content" id="content"
                        class="w-full border border-gray-300 py-2 pl-3 rounded mt-2 outline-none focus:ring-indigo-600 :ring-indigo-600"
                        placeholder="The post content goes here" rows="5">{{ old('content', $post->content) }}</textarea>
                    @error('content')
                        <p class="text-sm text-red-500 mt-2">{{ $message }}</p>
                    @enderror
                </div>

                <button type="submit"
                    class="cursor-pointer py-2 px-4 block mt-6 bg-indigo-500 text-white font-bold w-full text-center rounded">
                    Update</button>
            </form>
        </div>
    </div>
@endsection

さて、我々の見解は準備ができています、最終的なタッチはルートです.

路線
ルート/ウェブを更新します.PHPファイル.

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});
Route::resource('posts', PostController::class);

このコマンドをプロジェクトフォルダ内の端末に入力します.ブラウザを開きますhttp://127.0.0.1:8000/posts そして、あなたのアプリケーションをお楽しみください!

php artisan serve

結論
このポストでは、私はそれがどのようにララベル8とTruwindCSSは、2つの偉大なツールを使用してモダンなWebアプリケーションを作成するにはかなり簡単ですが表示されます.それは私たちが確認のような機能の追加を追加することによって我々のアプリを改善することができますポストや通知を削除する前に、JavaScriptライブラリを使用して、TOASTなどの客観的ではなかった.別のポストでそれをします.あなたがそれを役に立つという望み.
Back to the top