まず始めに「CRUD処理」とは、
これらの頭文字を取って「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」を使う設定なので、
1 2 3 4 5 6 7 8 |
// .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関数の中に、
1 2 3 4 |
// create_posts_table.php $table->string('title'); $table->text('body'); |
を追加、
そうするとこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 |
// 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.コントローラーを作成
コントローラーを作成する命令は、
1 2 3 |
// コントローラーを作る命令 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\
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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」に、
1 2 3 |
// PostController.php use App\Post; |
を追加する。
9.【indexメソッド】indexメソッドで、データベースの全てのデータを「index.blade.view」で見れるようにする
app\Http\Controllers
1 2 3 4 5 6 7 8 9 |
// 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」を使う。
1 |
composer require laravelcollective/html |
※LaravelCollective = 通常、ビューにフォームを書くには、HTMLを書く必要があるが、
「LaravelCollective」を使う事によって、ヘルパー関数が使えるようになる。
パッケージを追加するには config/app.php に、
が必要になる。
詳しくはここ。
11.app.phpにService ProviderとAliasを追加する(プロバイダーとファサードの登録)
bootstrap\config
1 2 3 4 5 6 7 8 9 10 |
// app.php 'providers' => [ // この中に ], ]; Collective\Html\HtmlServiceProvider::class, を追加する。 |
そして次に、
1 2 3 4 5 6 7 8 9 10 11 |
// app.php 'aliases' => [ // この中に ], ]; 'Form' => Collective\Html\HtmlFacade::class, 'Html' => Collective\Html\HtmlFacade::class, を追加する。 |
11.新しくルートを作成
routes\web.php
1 |
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」から、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 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」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// 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メソッド、
1 2 3 4 5 6 |
// PostController.php public function create() // ここでデータベースにデータを保存する設定を書く { return view('posts.create'); // ここで、posts/create.blade.phpを返す。 } |
そして次に「create.blade.php」の中にどのような処理をするかを書いていく。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// 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」も作成、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 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
1 2 3 4 5 6 7 8 9 10 11 |
// 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
1 2 3 4 5 6 7 |
// PostController.php public function show($id) { $post = Post::find($id); return view('posts.show', compact('post')); } |
そして「postsフォルダ」に、show.blade.phpを作成する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 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
1 2 3 4 5 6 7 |
// PostController.php public function edit($id) { $post = Post::find($id); return view('posts.edit', compact('post')); } |
そうしたら、postsフォルダに「edit.blade.php」を作る。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// 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
1 2 3 4 5 6 7 8 9 10 11 |
// 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
1 2 3 4 5 6 7 |
// PostController.php public function destroy($id) { post::find($id)->delete(); return redirect()->route('posts.index')->with('success', '記事を削除しました'); } |
これでOK。
ここまででとりあえず、
ここら辺の機能に関する説明は、一通り終わり。
今回の内容が理解出来れば、ある程度「CRUD」については問題ないはず。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
CRUDって一体何だろう?
CRUDについて勉強出来るチュートリアルみたいなものってどこかにないかなぁ?