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

2019.06.06 / 更新日：2019.06.10

困ってる人

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

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

Create(データの作成、登録)

Read(データを読み込む、参照する)

Update(データを更新、アップデートする)

Delete(データの削除)

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

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

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

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

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

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

１．データベースを作成する

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

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

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

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

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

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

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

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

cd desktop

laravel new sample

cd sample

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

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

プロジェクトフォルダ内の「.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のパスワード(ここもデフォルトのままだと空欄)

// .env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=sample001

DB_USERNAME=MySQLのユーザー名(デフォルトのままだと「root」)

DB_PASSWORD=MySQLのパスワード(ここもデフォルトのままだと空欄)

に変更する。

３．テーブルを作成

php artisan make:migration create_posts_tableで、

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

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

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

４．テーブルに新しくフィールドを追加

database\migrations

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

// create_posts_table.php

$table->string('title');
$table->text('body');

// 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();
    });
}

// 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」という項目が追加される。

５．新しくモデルを作成

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

php artisan make:model Post

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

「Post.php」が作られる。

６．コントローラーを作成

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

// コントローラーを作る命令

php artisan make:controller コントローラー名(今回は、PostController) --resource

// コントローラーを作る命令

php artisan make:controller コントローラー名(今回は、PostController) --resource

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

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

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

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

↓

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

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

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

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

７．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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $table = 'posts'; // テーブル名

protected $fillable = ['title', 'body']; // 追加した分をここに。

}

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

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

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

app\Http\Controllers

「PostController.php」に、

// PostController.php

use App\Post;

// PostController.php

use App\Post;

を追加する。

９．【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);
}

// 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関数」= 変数を１つ受け渡す場合に使う(with関数よりもcompactを使う事の方が多い)

10．LaravelCollectiveをインストール

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

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

composer require laravelcollective/html

1	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

'providers' => [

// この中に

];

Collective\Html\HtmlServiceProvider::class,

を追加する。

そして次に、

// app.php

'aliases' => [
	// この中に
    ],
];

'Form' => Collective\Html\HtmlFacade::class,
'Html' => Collective\Html\HtmlFacade::class,

を追加する。

// app.php

'aliases' => [

// この中に

];

'Form' => Collective\Html\HtmlFacade::class,

'Html' => Collective\Html\HtmlFacade::class,

を追加する。

11．新しくルートを作成

routes\web.php

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

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

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

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

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

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

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

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

とりあえずまず始めは、以下の２つのファイルを「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>

// master.blade.php

<!DOCTYPE html>

<head>

<title>タイトル部分(CRUD練習用)</title>

</head>

<body>

@yield('content')

</div>

</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

// index.blade.php

@extends('posts.master')

@section('content')

<h3>CRUD練習用</h3>

</div>

<a class="btn btn-xs btn-success" href="{{ route('posts.create') }}">新規作成：Create New Post</a>

</div>

@if ($message = Session::get('success'))

<p>{{ $message }}</p>

</div>

@endif

<tr>

<th>タイトル：Title</th>

<th width="300px">Actions</th>

</tr>

@foreach ($posts as $post)

<tr>

<td>{{ $post->title }}</td>

<td>

{!! 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を返す。
}

// 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

// create.blade.php(記事の新規作成ページ)※書いてる内容は正直よく分からない

@extends('posts.master')

@section('content')

<h3>記事を新規作成</h3>

</div>

@if(count($errors) > 0)

<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>

// form.blade.php(※ここでフォーム用のボタンを作成する)

{!! Form::text('title', null, ['placeholder'=>'Title', 'class'=>'form-control']) !!}

</div>

{!! Form::textarea('body', null, ['placeholder'=>'Body', 'class'=>'form-control', 'style'=>'height:150px']) !!}

</div>

<button type="submit" class="btn btn-xs btn-primary" name="button">投稿する：Submit</button>

</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', '記事を投稿しました。');
}

// 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'));
}

// 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.blade.php

@extends('posts.master')

@section('content')

<h3>記事を見る</h3>

</div>

</div>

</div>

@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'));
}

// 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.blade.php

create.blade.phpの中身をコピーしてきて、そのまま貼り付けし、一部、内容を書き換える。

@extends('posts.master')

@section('content')

<h3>記事内容の編集</h3>

</div>

@if(count($errors) > 0)

<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');
}

// 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', '記事を削除しました');
}

// PostController.php

public function destroy($id)

{

post::find($id)->delete();

return redirect()->route('posts.index')->with('success', '記事を削除しました');

}

これでOK。

ここまででとりあえず、

Create(データの作成、登録)

Read(データを読み込む、参照する)

Update(データを更新、アップデートする)

Delete(データの削除)

ここら辺の機能に関する説明は、一通り終わり。

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

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール

ikuxx / いくさんぽ

海外約50ヶ国を放浪中

海外生活が長い事もあり、英語と韓国語をある程度話せます。

最近はマレーシアに住んでるおかげで中国語もちょこちょこ伸びてきてます。

YouTubeもやってます。

このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい

最近はマレーシアに住んでいますが、数年後にはヨーロッパ、その後は中国に住みたいなと考えています。

また久々カナダに住むのもいいかも。

でも最終的にはやっぱり日本かな。

季節はあるし、食べ物も美味しいし

何だかんだでやっぱり日本は最高ですね。

ユーチューブ(YouTube)

ツイッター(Twitter)

インスタグラム(Instagram)

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

１．データベースを作成する

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

３．テーブルを作成

４．テーブルに新しくフィールドを追加

５．新しくモデルを作成

６．コントローラーを作成

７．Declare our table (if your table is not procedurel)

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

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

10．LaravelCollectiveをインストール

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

11．新しくルートを作成

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

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

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

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

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

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

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

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

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