SEブログ

【Laravel】DBの内容をブラウザに表示する方法

この記事は、Laravel 入門者向けの ひとこと掲示板シリーズの記事になります。

【Laravel】入門者向けとしてのまとめ

 

 

前回は、tinker を使い、MySQL のテーブルをコンソール上で操作する方法について書きました。

 

【PHP】LaravelのDBとテーブルを作成する

 

 

今回は、DB の内容をブラウザに表示する前の流れについて書きました。

ブラウザに表示ができる所までくると、自分の場合は何かモチベーションがわいてきますね。

バックエンドだけではなく Web フロント側も好きなので、PHP でコードを書くよりも HTML や CSS を tinker してフォントの種類や大きさ、色を変える事も同じくらいかかそれ以上好きです。

PHP を始めたのも、そもそも Web が好きだからというところもあったような気がします。

 

 

という事で、まずはいつものように使っている環境について説明いたします。

 

 

スポンサーリンク

環境

 

 

以下の環境を使っています。

 

  • Cloud 9
  • PHP 7.0
  • Laravel 5.5.40
  • MySQL 5.5

 

 

 

という事で早速始めたいところですが、その前に職人さん ( artisan ) にコントローラーを生成してもらう必要があります。

 

 

スポンサーリンク

コントローラーの生成

 

 

Cloud 9 のコンソールに以下のコマンドを入力して実行します。

 

user:~/workspace/bbs $ php artisan make:controller PostsController
Controller created successfully.

 

 

コマンド実行後、Controller が生成されています。

 

 

ファイルの中身を見ますと、名前空間が宣言されていて、空のクラスが生成されています。

 

 

 

 

という事で、コントローラーが生成されましたので、今回の本題に進めます。

 

 

処理の流れ

 

 

ブラウザに URL を入力してからコンテンツが表示されるまでには、基本的に Laravel では内部的に以下の流れで処理されていると思います。

 

 

  1. まずはルーティングで処理され、コントローラーのメソッドに処理が渡される
  2. コントローラーでメソッドの処理を行い、変数など処理を View に渡される
  3. 変数や連想配列など、View で受けた処理を行う

 

 

ルーティングの処理

 


routes ディレクトリ下に設置されている、ルートファイルで定義している内容で処理されます。

 

 

例えば、https://…/posts/bbs と入力して表示した場合

web.php にある、以下の内容が処理されます。

 

Route::get('/bbs', 'PostsController@bbs');

 

 

 

 

コントローラーの処理

 

 

ルートファイルから処理を受け、コントローラーでメソッドの処理をし、処理内容を View に渡します。

 

またコントローラーでは名前空間やクラスの宣言をしてあげる必要があります。

view に変数を渡す方法としては変数や連想配列などをコントローラで書きます。

 

<?php
namespace App\Http\Controllers; ← 名前空間の宣言
use Illuminate\Http\Request; use App\Post; ← クラスの宣言

class PostsController extends Controller {

    public function bbs() {
        $posts = Post::all(); ← $posts はインスタンスの配列
        $error = array(); ← view 側の $error 変数

        return view('posts.bbs', [ ← view メソッドで posts フォルダの bbs ファイルに処理を渡す
            'posts' => $posts, ← 処理を渡す変数を連想配列で書く
            'error' => $error
        ]);

    }

}

 

 

 

 

 

ビューの処理

 

 

View にコントローラーから渡された変数を foreach で取り出して、エスケープ処理します。

今までの php ですと foreach は以下のように書いていました。

 

foreach ($key as $value) {

    $value を取り出す処理

}

 

 

 

Laravel ではこのように書くことができます。

 

@foreach ($key as $value) {
    $value を取り出す処理

}

 

 

 

また、htmlspecialchars でエスケープ処理している部分に関しては、波カッコでくくるだけで処理できます。

これは便利ですね。htmlspecialchars や、ユーザー定義関数とか使わなくていいので明示的に波カッコだけでエスケープができるので便利です。

 

@foreach($posts as $post)
    

        {{ $post->title }}: {{ $post->body }} -{{ $post->created_at }}
    

@endforeach

 

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ひとこと掲示板</title>
        <link rel="stylesheet" href="bbs.css">
    </head>
    <body>

    <h2>ひとこと掲示板</h2>

        <form method="post">
            <label>タイトル: <input id="name" type="text" name="title" value=""></label>
            <label>内容: <input id="comment" type="text" name="body" value=""></label>
            <input type="submit" name="submit" value="送信">
        </form>

<?php foreach ($error as $value) { ?>
    
    <?php print htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); ?>
    
<?php } ?>

        @foreach($posts as $post)

                {{ $post->title }}: {{ $post->body }} -{{ $post->created_at }}

        @endforeach

     </body>
</html>

 

 

 

 

スポンサーリンク

ブラウザで確認する

 

 

では、実際にブラウザに表示されるか確認してみます。

Cloud 9 のコンソールから職人さんにサーバーを立ち上げてもらいます。

また忘れないように、MySQL のサービスを起動しておきます。

 

user:~/workspace/bbs $ mysql-ctl start
* Starting MySQL database server mysqld
...done.
* Checking for tables which need an upgrade, are corrupt or were 
not closed cleanly.
user:~/workspace/bbs $ php artisan serve --host=$IP --port=$PORT
Laravel development server started: <http://0.0.0.0:8080>

 

 

ブラウザでアクセスします。テーブルに入っているデータが正しく取得できて表示されています。

 

 

 

 

いかがでしょうか。ここまでくると「フレームワークで Web アプリ作れてきたぞ!」って感じになってきました。

まだまだできていないとはわかっていますが、ワクワクします。(笑)

 

 

では最後までお読みいただきありがとうございました!

 

 

以下の記事をクリックして次に進みましょう!

 

【Laravel】フォームから書いた内容をDBに書き込む方法

 

 

おすすめの本はこちら ↓↓↓