Larabel5.8入門メモ書き|記事一覧表示と記事詳細表示

0
121
laravel 5.8.3 記事一覧表示
laravel 5.8.3 記事一覧表示

Laravel5でMysqlのデータを表示するところまで

LaravelでMysqlのデータを一覧表示、詳細表示するところまでのメモ書き。編集と削除は無し。MysqlへはphpMyadminを使い手動でデータを投入。

MacのMAMP(Mysql)とLaravelを接続する

Mac、PHP、MAMP、WEBサーバの環境

  • Mac:10.14.3
  • MAMP:7.3.1
  • WEBサーバ:Apache
  • Mysql:5.7.25
  • ポート:Apache (80)
    Mysql (3306)

Laravelの開発環境準備

MAMPのphpMyadminからデータベースを作成

MAMPを起動し、phpMyadminへアクセス。

MAMPを起動しphpMyadminへアクセス
MAMPを起動しphpMyadminへアクセス
  • データベース名:blog
  • 照合順序:utf8_unicode_ci

【作成】ボタンをクリック

Larabelのプロジェクト作成

LarabelコマンドをMacで使えるようにする

こちらの記事を参考に:Mac OSにLaravelローカル開発環境構築

プロジェクトのディレクトリへ移動

Laravelのプロジェクトフォルダをおきたい場所へ移動する。デスクトップが良ければターミナルからデスクトップへ移動しホームディレクトリならそのままコマンドを入力。MAMPなら /Applications/MAMP/htdocs/ へ移動。

ホーム
$ cd ~
デスクトップ
$ cd ~/Desktop
MAMP
$ cd /Applications/MAMP/htdocs

移動させたら、プロジェクト作成。(プロジェクト名:blog)

$ laravel new blog

MAMPでドキュメントルートを変更する

デフォルトの場合、http://localhost/blog/public/で表示される。
http://localhost で表示させたい場合、MAMPの/Applications/MAMP/conf/apache/httpd.confを編集する。

MAMPのドキュメントルート設定
MAMPのドキュメントルート設定

編集ファイル:/Applications/MAMP/conf/apache/httpd.conf

193行目辺りの「MAMP DOCUMENT_ROOT !! Don’t remove this line !!」の下に
DocumentRoot "/Applications/MAMP/htdocs"と表示されている箇所があるのでこちらをDocumentRoot "/Applications/MAMP/htdocs/blog/public"にする。

編集を終えたら、MAMPのサーバを再起動させる。

MAMPの再起動
MAMP再起動

ブラウザで http://localhost/を開き、キャプチャのような画面が表示されればOK。

laravelをルートディレクトリで表示させる
laravelをルートディレクトリで表示させる

Laravelの設定ファイルの編集

.envファイルをテキストエディタで編集。.envは不可視ファイルになっているので、通常だと見えないので注意。また、LaravelのデータベースをMAMPのMysqlへ接続する場合、ソケットの設定を追加する必要がある。

laravelのenvファイル修正
laravelのenvファイル修正
  • DB_DATABASE=blog
  • DB_USERNAME=root
  • DB_PASSWORD=root
  • DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
  • CHARSET=utf8
  • COLLATION=utf8_unicode_ci

LaravelとMysqlの接続確認

MAMPとLaravelのデータベース設定がうまくいっているか確認するには、migrateするのがてっとり早い。

$ php artisan migrate

laravel mamp env 接続設定確認

「Migration table created successfully.」と表示されれば次へ進む。エラーが出たらなにか設定が間違っている。

ModelとControllerの作成

-aオプションを入れることで必要なファイルを一緒に生成してくれる。
-a:(Generate a migration, factory, and resource controller for the model)

このときのモデル名は先頭大文字で単数形

$ php artisan make:model Post -a
laravel model controllerの作成
model,controllerの作成

カラムの追加

blog/database/migrations/タイムスタンプ_create_posts_tableの中身を編集。記事タイトルと本文を追加

$table->string('title');
$table->string('body');
2019_03_10_021402_create_posts_table.php
カラムの追加の設定
カラムの追加の設定

編集を終えたら、migrate

$ php artisan migrate
migrateしカラムを追加
migrateしカラムを追加

phpMyadminへアクセスし、テーブルに”title”と”body”のカラムが追加されていることを確認。「挿入」のタブをクリック

mysqlにカラムが追加される
mysqlにカラムが追加される

タイトル(title)と本文(title)サンプルのデータを挿入する。レコード(行)は「〜行づつ挿入を行う」に数字を入力することで追加できる。項目の入力を終えたら【実行】ボタンをクリック。

mysqlからサンプルデータを投入
mysqlからサンプルデータを投入

【表示】タブをクリックしデータが投入されていることを確認。

phpmyadminからデータ投入
phpmyadminからデータ投入

LaravelのルーティングとViewの作成

  • ルーティング:どのURLにアクセスされたら、何を返すか
  • View:ブラウザに表示させるページ(テンプレート)

ルーティングの設定とテンプレートの設置

blog/routes/web.phpを開くき以下を追加。

Route::get('/posts','PostController@index')->name('post.index');

viewに渡す値と変数 テンプレートの指定
viewに渡す値と変数 テンプレートの指定

  • ①変数
  • ②postsテーブルの全データを取得
  • ③view(テンプレート)
  • ④viewに渡す変数
  • ⑤viewに渡す値

blog/resources/viewsindex.blade.phpを設置

記事一覧のテンプレート
記事一覧のテンプレート
@foreach($posts as $post)
{{ $post -> id }}:{{ $post -> title }}:{{ $post -> body }}
@endforeach

http://localhost/posts へアクセスするとMysqlのpostsテーブルに入っているデータ一覧が表示される

記事一覧表示
記事一覧表示

記事詳細画面のリンクと画面の作成

記事詳細へ飛ぶリンクを作成する。

Route::get('/post/{id}','PostController@show')->name('post.show');

記事詳細 ルーティング
記事詳細 ルーティング

web.php記事詳細から記事一覧へのリンク。引数として[$post -> id]を渡す。

index.blade.php {{ route('post.show',[$post -> id]) }}

記事一覧から記事詳細へのリンク
記事一覧から記事詳細へのリンク

PostController.php showメソッド

    public function show(Request $request,$id, Post $post)
    {
        $post = Post::find($id);
        return view('show',[
            'post'=>$post
        ]);
    }
PostController 記事詳細の処理
PostController 記事詳細の処理
  • ①IDを取得
  • ②Postテーブルから取得したIDでフィルタ
  • ③show.blade.phpテンプレートを表示
  • ④post変数にpost(記事詳細)情報の値を渡す

show.blade.php

記事詳細のテンプレート
記事詳細のテンプレート

ID:{{ $post -> id }}
タイトル:{{ $post -> title }}
本文:{{ $post -> body }}

TOPへ戻るのリンクを記事詳細へ追加する。web.phpのルートへ->name('ルート名')として登録した文字がそのまま使える。

{{ route('post.index') }}

TOPへ戻るリンク追加
TOPへ戻るリンク追加
TOPへ戻るリンク追加 フロント側
TOPへ戻るリンク追加 フロント側

Laravel入門 参考リンク

paizaラーニング:Laravelの基本を理解しよう

Udemy :【2日でできる】はじめての PHP 7 x Laravel 5.5 入門

コメントを書く

必須項目をご入力ください
必須項目をご入力ください