Laravel CRUD入門 チュートリアル学習【初心者・基礎練習・勉強】

スポンサーリンク
man

困ってる人

CRUDって一体何だろう?
CRUDについて勉強出来るチュートリアルみたいなものってどこかにないかなぁ?


まず始めに「CRUD処理」とは、

  • Create(データの作成、登録)
  • Read(データを読み込む、参照する)
  • Update(データを更新、アップデートする)
  • Delete(データの削除)

  • これらの頭文字を取って「CRUD」

    という事で、今回は何かしらのものを1つ作ってみて、

    実際にどんな感じで「CRUD」の処理がされているのか?というのを見ていく記事。

    今回作るのは、こんな感じのもの。

    今回の内容を順番に進めていく内にエラーがなどが出る場合は、

    これとは別の記事にもエラーの解決方法などがいろいろと書いてあるので、それらにも目を通してみるといいかも。

    1.データベースを作成する

    データベースに関しては、今回は「MySQL(phpMyAdmin)」を使います。

    という事で、http://localhost/phpmyadmin/ にアクセス

    既に「XAMPP」などがインストールされている場合には、

    「XAMPP」起動後に「Admin」をクリックしてもこの画面を表示する事が出来ます。

    という事で、今回は試しに「sample001」という名前のデータベースにしてみました。

    今の時点では、データベース内にはまだテーブルがない状態。

    無事にデータベースの作成が終わったら、今回はデスクトップに「sample」というプロジェクトを作る準備をします。

    という事で「コマンドプロンプト」を開き、

    cd desktop

    laravel new sample

    cd sample

    そうすると、デスクトップ上に「sample」というプロジェクトファイルふぁ出来上がる。

    2.データベースとプロジェクトを繋げる

    プロジェクトフォルダ内の「.env」を開いて、データベースとプロジェクトファイルの設定、

    今回は「MySQL」を使う設定なので、

    // .env
    
    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=sample001
    DB_USERNAME=MySQLのユーザー名(デフォルトのままだと「root」)
    DB_PASSWORD=MySQLのパスワード(ここもデフォルトのままだと空欄)

    に変更する。

    3.テーブルを作成

    php artisan make:migration create_posts_tableで、

    database\migrations の中に、テーブルが出来上がる

    そうしたら、php artisan serve でサーバーを起動し、

    ブラウザで、http://127.0.0.1:8000 にアクセス

    4.テーブルに新しくフィールドを追加

    database\migrations

    「create_posts_table.php」の、up関数の中に、

    // create_posts_table.php
    
    $table->string('title');
    $table->text('body');

    を追加、

    そうするとこんな感じ。

    // create_posts_table.php
    
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

    保存したら、php artisan migrate で、変更した設定をデータベースに反映させる。

    そうすると「phpMyAdmin」にも、postsテーブルが作成される。

    そして、postsテーブル内にも「create_posts_table.php」で書いた内容、

    「title」「body」という項目が追加される。

    5.新しくモデルを作成

    モデルを作成する命令は、

    php artisan make:model Post

    そうすると、app\ の中に、

    「Post.php」が作られる。

    6.コントローラーを作成

    コントローラーを作成する命令は、

    // コントローラーを作る命令
    
    php artisan make:controller コントローラー名(今回は、PostController) --resource

    そうする事で、app\Http\Controller\ の中に、

    「PostController.php」が作成される。

    – -resource、もしくは、-r(rオプション)を使う事によって、

    「CRUD」に必要なメソッドが自動的に作成される。

    「CRUD」に必要なメソッドというのは、基本的には7項目で、

    ここで例えば、php artisan route:list で、テーブルの中身を確認。

    これらの7項目のデータが、作ったコントローラーの中にも自動的に書かれる。

    この中にある関数内に、それぞれのメソッドを書いていき「CRUD処理」をしていく。

    7.Declare our table (if your table is not procedurel)

    app\

    // Post.php
    
    <?php
    
    namespace App;
    
    use Illuminate\Database\Eloquent\Model;
    
    class Post extends Model
    {
        protected $table = 'posts'; // テーブル名
        protected $fillable = ['title', 'body']; // 追加した分をここに。
    }

    テーブルのカラムを追加した場合は、

    「Post.php」に、protectedで追加したデータを保護する。

    8.Postコントローラーで、Postモデルを使用する設定

    app\Http\Controllers

    「PostController.php」に、

    // PostController.php
    
    use App\Post;

    を追加する。

    9.【indexメソッド】indexメソッドで、データベースの全てのデータを「index.blade.view」で見れるようにする

    app\Http\Controllers

    // PostController.php
    
    public function index()
    {
        $posts = Post::latest()->paginate(5); // ここでページネーションの設定(paginateメソッド), ページごとに表示したいアイテム数
    
        // ここで、postフォルダの、index.blade.phpを表示するように。
        return view('posts.index', compact('posts'))->with('i',(request()->input('page',1) -1) *5);
    }

    この場合の「compact関数」= 変数を1つ受け渡す場合に使う(with関数よりもcompactを使う事の方が多い)

    10.LaravelCollectiveをインストール

    「LaravelCollective」をインストールする時は、

    「コマンドプロンプト」「composer」を使う。

    composer require laravelcollective/html

    ※LaravelCollective = 通常、ビューにフォームを書くには、HTMLを書く必要があるが、

    「LaravelCollective」を使う事によって、ヘルパー関数が使えるようになる。

    パッケージを追加するには config/app.php に、

  • サービス・プロバイダーの登録
  • ファサードの登録
  • が必要になる。

    詳しくはここ

    11.app.phpにService ProviderとAliasを追加する(プロバイダーとファサードの登録)

    bootstrap\config

    // app.php
    
    'providers' => [
    	// この中に
        ],
    ];
    
    Collective\Html\HtmlServiceProvider::class,
    
    を追加する。

    そして次に、

    // app.php
    
    'aliases' => [
    	// この中に
        ],
    ];
    
    'Form' => Collective\Html\HtmlFacade::class,
    'Html' => Collective\Html\HtmlFacade::class,
    
    を追加する。

    11.新しくルートを作成

    routes\web.php

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

    を追加する(postsに来た場合 → PostControllerに行くように。)

    Laravelでは「Route::resource」を使う事で、CRUDのルーティングを一度に行う事が出来る。

    今後はこの「PostController.php」の中で全ての処理をするように設定する。

    12.resources\viewsに、新しくフォルダを作成し、中に今回必要なファイルを作成する

    今回は、resources\views の中に「posts」という名前のフォルダを作成し、

    その中に、ビューファイル(index.blade.phpなど)を入れていく。

    とりあえずまず始めは、以下の2つのファイルを「posts」の中に作る。

  • master.blade.php
  • index.blade.php

  • という事で、まずは「master.blade.php」から、

    // master.blade.php
    
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8">
    	<title>タイトル部分(CRUD練習用)</title>
    	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    
    	<div class="container">
    		@yield('content')
    	</div>
    	
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </body>
    </html>

    そして次に「index.blade.php」

    // index.blade.php
    
    @extends('posts.master')
    
    @section('content')
    	
    	<div class="row">
    		<div class="col-lg-12">
    			<h3>CRUD練習用</h3>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-sm-12">
    			<div class="pull-right">
    				<a class="btn btn-xs btn-success" href="{{ route('posts.create') }}">新規作成:Create New Post</a>
    			</div>
    		</div>
    	</div>	
    
    	@if ($message = Session::get('success'))
    		<div class="alert alert-success">
    			<p>{{ $message }}</p>
    		</div>
    	@endif
    
    	<table class="table table-bordered">
    		<tr>
    			<th>No.</th>
    			<th>タイトル:Title</th>
    			<th>本文:Body</th>
    			<th width="300px">Actions</th>
    		</tr>
    
    		@foreach ($posts as $post)
    			<tr>
    				<td>{{ ++$i }}</td>
    				<td>{{ $post->title }}</td>
    				<td>{{ $post->body }}</td>
    				<td>
    					<a class="btn btn-xs btn-info" href="{{ route('posts.show', $post->id) }}">見る:Show</a>
    					<a class="btn btn-xs btn-primary" href="{{ route('posts.edit', $post->id) }}">編集:Edit</a>
    
    					{!! Form::open(['method' => 'DELETE', 'route'=>['posts.destroy', $post->id], 'style'=> 'display:inline']) !!}
    					{!! Form::submit('消す:Delete',['class'=> 'btn btn-xs btn-danger']) !!}
    					{!! Form::close() !!}
    				</td>
    			</tr>
    		@endforeach
    	</table>
    
    	{!! $posts->links() !!}
    
    @endsection

    13.データベースに新しくデータを追加して、indexページで見てみる。

    ここで試しに「phpMyAdmin」側から、データベースにデータを追加出来るかを確認してみる。

    「phpMyAdmin」のページを開く

    Postsテーブルを選択

    「Insert」タブ

    「title」右側の枠内に適当に文字を入力
    (今回は分かりやすく「初めての投稿」と入力してみた)

    「body」右側の枠内にも適当に文字を入力
    (今回は試しに、初めまして、こんにちは!と入力してみた)

    「created_at」「updated_at」の日付を適当に選択、

    「Go」


    ブラウザを更新すると、入力したものが登録、反映され、

    こんな感じに表示されるようになる。

    この時点ではまだ、右側の新規作成や、編集などのボタンを押しても何も出来ない。

    という事で、次からはメソッドを作成していく。

    14.【create】メソッドを作成する。

    という事で「新規作成ページ」用に、新たにページを作っていく、

    postsフォルダ「create.blade.php」を作成。

    app\Http\Controllers

    「PostController.php」createメソッド

    // PostController.php
    
    public function create() // ここでデータベースにデータを保存する設定を書く
    {
        return view('posts.create'); // ここで、posts/create.blade.phpを返す。
    }

    そして次に「create.blade.php」の中にどのような処理をするかを書いていく。

    // create.blade.php(記事の新規作成ページ)※書いてる内容は正直よく分からない
    
    @extends('posts.master')
    
    @section('content')
    <div class="row">
    	<div class="col-lg-12">
    		<div class="pull-left">
    			<h3>記事を新規作成</h3>
    		</div>
    	</div>
    </div>
    
    @if(count($errors) > 0)
    
    	<div class="alert alert-danger">
    		<strong>Whooops!! </strong> There were some problems with your input.<br>
    		<ul>
    			@foreach ($errors->all() as $error)
    				<li>{{ $error }}</li>
    			@endforeach
    		</ul>
    	</div>
    @endif
    
    {!! Form::open(['route' => 'posts.store', 'method' => 'POST']) !!}
    @include('posts.form')
    {!! Form::close() !!}
    
    @endsection

    そうしたら次に「form.blade.php」も作成、

    // form.blade.php(※ここでフォーム用のボタンを作成する)
    
    <div class="row">
    	<div class="col-xs-12">
    		<div class="form-group">
    			<strong>タイトル : </strong>
    			{!! Form::text('title', null, ['placeholder'=>'Title', 'class'=>'form-control']) !!}
    		</div>
    	</div>
    	<div class="col-xs-12">
    		<div class="form-group">
    			<strong>本文 : </strong>
    			{!! Form::textarea('body', null, ['placeholder'=>'Body', 'class'=>'form-control', 'style'=>'height:150px']) !!}
    		</div>
    	</div>
    	<div class="col-xs-12">
    		<a class="btn btn-xs btn-success" href="{{ route('posts.index') }}">戻る:Back</a>
    		<button type="submit" class="btn btn-xs btn-primary" name="button">投稿する:Submit</button>
    	</div>
    </div>

    そうしたら「http://127.0.0.1:8000/posts/create」にブラウザでアクセスしてみる。

    ※この時点ではまだ「投稿する」のボタンを押しても、何の反応もないので、

    次の、store関数に新しくメソッドを作り、データを保存出来るようにする。

    15.【storeメソッド】入力したデータをデータベースに保存するために、Store関数に新しくメソッドを作る

    Store関数 = データベースに新しくデータを保存する。

    app\Http\Controllers

    // PostController.php
    
    public function store(Request $request)
    {
        request()->validate([
            'title' => 'required',
            'body' => 'required',
        ]);
        Post::create($request->all());
        return redirect()->route('posts.index')->with('success', '記事を投稿しました。');
    }

    こうする事で、

    「タイトル」「本文」を入力し「投稿する」ボタンを押して、データをデータベースに登録する事が出来るようになる。

    ※データは、http://127.0.0.1:8000/posts に登録される(phpMyAdminのテーブル内にも同時に登録される)

    試しに、タイトルと内容を追加してみるとこんな感じ。

    16.【showメソッド】個別のデータを、showメソッドを使ってページに表示させる(個別記事ページ)

    app\Http\Controllers

    // PostController.php
    
    public function show($id)
    {
        $post = Post::find($id);
        return view('posts.show', compact('post'));
    }

    そして「postsフォルダ」に、show.blade.phpを作成する。

    // show.blade.php
    
    @extends('posts.master')
    
    @section('content')
    
    	<div class="row">
    		<div class="col-lg-12">
    			<div class="pull-left">
    				<h3>記事を見る</h3>
    			</div>
    		</div>
    	</div>
    
    	<div class="row">
    		<div class="col-xs-12">
    			<div class="form-group">
    				<strong>タイトル : </strong>
    				{{ $post->title }}
    			</div>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-xs-12">
    			<div class="form-group">
    				<strong>本文 : </strong>
    				{{ $post->body }}
    			</div>
    		</div>
    	</div>
    	<a class="btn btn-xs btn-primary" href="{{ route('posts.index') }}">戻る:Back</a>
    
    @endsection

    そうすれば「見る:Show」ボタンを押して、記事の内容を確認する事が出来るようになる。

    17.【editメソッド】それぞれの記事データを、editメソッドを使用し、edit.blade.phpで編集出来るようにする。

    app\Http\Controllers

    // PostController.php
    
    public function edit($id)
    {
        $post = Post::find($id);
        return view('posts.edit', compact('post'));
    }

    そうしたら、postsフォルダ「edit.blade.php」を作る。

    // edit.blade.php
    
    create.blade.phpの中身をコピーしてきて、そのまま貼り付けし、一部、内容を書き換える。
    
    
    @extends('posts.master')
    
    @section('content')
    <div class="row">
    	<div class="col-lg-12">
    		<div class="pull-left">
    			<h3>記事内容の編集</h3>
    		</div>
    	</div>
    </div>
    
    @if(count($errors) > 0)
    
    	<div class="alert alert-danger">
    		<strong>Whooops!! </strong> There were some problems with your input.<br>
    		<ul>
    			@foreach ($errors->all() as $error)
    				<li>{{ $error }}</li>
    			@endforeach
    		</ul>
    	</div>
    @endif
    
    {!! Form::model($post, ['method'=>'PATCH', 'route'=>['posts.update', $post->id]]) !!}
    @include('posts.form')
    {!! Form::close() !!}
    
    
    @endsection

    そうすると「編集:Edit」ボタンを押す事によって、記事の編集画面が表示されるようになる。

    ただ、今この時点では、まだ「投稿」ボタンを押しても、データは反映されないので、

    次の、updateメソッドでデータを反映させるように設定をする。

    18.【updateメソッド】updateメソッドで、データをデータベースに保存する

    「storeメソッド」の中身をコピーしてきて、内容を書き変える、

    app\Http\Controllers

    // PostController.php
    
    public function update(Request $request, $id)
    {
        request()->validate([
            'title' => 'required',
            'body' => 'required',
        ]);
        Post::find($id)->update($request->all());
        return redirect()->route('posts.index')->with('success', 'Post created successfully');
    }

    そうする事で、今後はそれぞれの記事を個別に編集出来るようになる。

    編集後は「phpMyAdmin」の方にもきちんと反映される。

    19.【destroyメソッド】destroyメソッドを使用して、データベースのデータを削除する。

    そして最後に「消す:Delete」ボタンの設定、

    app\Http\Controllers

    // PostController.php
    
    public function destroy($id)
    {
        post::find($id)->delete();
        return redirect()->route('posts.index')->with('success', '記事を削除しました');
    }

    これでOK。

    ここまででとりあえず、

  • Create(データの作成、登録)
  • Read(データを読み込む、参照する)
  • Update(データを更新、アップデートする)
  • Delete(データの削除)
  • ここら辺の機能に関する説明は、一通り終わり。

    今回の内容が理解出来れば、ある程度「CRUD」については問題ないはず。

    コメント

    タイトルとURLをコピーしました