【投稿アプリ自作(2)】Laravelで"Hello World"表示 (Laravel)

f:id:shiguregaki:20170515234701j:plain
Webアプリを自作するためにPHPのフレームワークのLaravelを導入することに決めました。
PHP初心者かつLaravel初心者ですが、自分なりにスキルを得るためにLaravelを用いた記事投稿アプリを自作しました。その過程を備忘録としてまとめます。
最終的にはブラウザを利用して記事投稿画面の表示、ユーザごとの記事投稿数のグラフ化を目指したいと思います。
本記事は連載【投稿アプリ自作】の第二回目で、Laravelで"Hello World"を表示させることを目指します。
※Laravelは5.3からファイル構成が大幅に変わりました。本記事ではLaravel5.3以降を使って説明したいと思います。

ゴール

本記事では、下の画像の様にブラウザ上でHello Worldが表示できるようになることを目指します。

f:id:shiguregaki:20170515234500j:plain

必要なもの

	必要なもの		価格(円)
1	PC		ピンキリ
1	備考	インターネット接続可能なこと
2	XAMPP		無料
2	備考	持っていない場合は、こちらを参照→XAMPPのインストール方法
3	Composer		無料
3	備考	持っていない場合は、こちらを参照→Composerのインストール方法

Laravelソースファイルの変更

変更や新規作成するLaravelファイル一覧

Laravelのプロジェクトファイル配下にあるファイルで本記事の中で変更、新規作成するファイルについてまとめました。

	ファイル名	対応	備考
1	app/Http/Controllers/ArticleController.php	新規作成	“php artisan make:controller”コマンドで生成
2	resources/views/layout.blade.php	新規作成
3	routes/web.php	変更

コントローラーの新規作成

コントローラーはブラウザからのアクションに応じて実行されるファイルです。
ブラウザからのアクションはURLによるページアクセスから入力フォームからのPOSTなどさまざまです。
各アクションに応じたコントローラーを後述するルーティングファイルによって紐づけています。

コントローラーはLaravelのプロジェクトフォルダ上でartisanコマンドにて作成します。

コントローラーを新規作成するコマンド
>php artisan make:controller <コントローラー名>

f:id:shiguregaki:20170515234606j:plain
※上の画像ではコントローラー名をArticleControllerにしています。実際に使う時はお好きな名前に変更してください。

コントローラーはLaravelのプロジェクトフォルダの以下のディレクトリに格納されます。

コントローラーの格納場所<プロジェクトファイルのルートディレクトリ>/app/Http/Controllers/

上記格納場所を確認すると、コマンドで指定したファイル名でコントローラーが自動生成されているはずです。

f:id:shiguregaki:20170515234616j:plain

コントローラーの中身を確認すると、下記のようにControllerクラスを継承したコントローラが定義されており、メソッドは空の状態であることが分かります。
上で実行した"artisan make:controller"コマンドのオプションを指定することでデフォルトで基本メソッドを追加したりすることもできます。

ArticleController.phpのデフォルト

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
    //
}

コントローラーの変更

先ほど作成したコントローラーにメソッドを追加します。
後述のルーティングファイルからコントローラーのこの関数を呼ぶことにします。
特に処理はなくこの関数が呼ばれるとlayoutという名称のビュー(後述)が実行されて画面出力されます。

ArticleController.phpの変更

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
    public function sayHello(){
        return view('layout');
    }
}

ビューの新規作成

コントローラーの次はビューファイルを作成します。
ビューはコントローラーから加工したデータなどを引数として受け取り、画面上に出力させるためのファイルです。
ブラウザに出力させたいので、HTML文で記入します。

ビューは下記のディレクトリに格納します。

ビューの格納場所<プロジェクトファイルのルートディレクトリ>/resources/views/

上記のディレクトリに新しくビューを作成します。このとき注意が必要なのはファイルの拡張子です。
ビューの拡張子は必ず.blade.phpにしてください。

f:id:shiguregaki:20170515234627j:plain

ビューの変更

先ほど作成したビューをHTMLで"Hello World"と表示させるため以下の様に変更します。

layout.blade.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>  
    <h1>Hello World!</h1>
</body>
</html>

非常に簡単ですが、body要素の中に"Hello World"を入れました。

ルーティングの変更

最後にルーティングを変更します。
ルーティングは特定のアクセス先とコントローラーを紐づけるファイルです。

ルーティングは下記のディレクトリに格納されています。

ルーティングの格納場所<プロジェクトファイルのルートディレクトリ>/routes/

上記のディレクトリにあるweb.phpを変更します。変更内容は以下の一行をweb.phpに追加しました。

web.phpに一行追加する

Route::get('sayhello', 'ArticleController@sayHello');

sayhelloというアクセスに対して、コントローラー名@メソッド名(上のソースの例ではArticleController@syaHello)で実行するメソッドを指定します。

以上でソースファイルの変更はすべてとなります。
いよいよ次にブラウザで表示できるかを確認してみます。

ブラウザで確認

上で変更したソースが正しく動作するかをブラウザで確認します。

Apacheの起動

ブラウザでlocalhostにアクセスするため、Apacheを起動します。
私の環境ではXAMPP導入してApacheを起動させました。
※XAMPPをもしインストールしていなかったら、下記のサイトを参考にインストールしてみてください。
XAMPPのインストール方法

f:id:shiguregaki:20170515234638j:plain

ブラウザ上で動作確認

ブラウザ上で以下のURLにアクセスします。

アクセスのURLlocalhost/<Laravelプロジェクトファイル名>/public/<ルーティングファイルで指定したアクセス先>

下の画像の様に"Hello World!"と表示されていれば、成功です。

f:id:shiguregaki:20170515234647j:plain

まとめ

今回はLaravelを使って画面上に"Hello World"を表示させる方法をまとめました。
URLアクセス=>ルーティングファイル=>コントローラー=>ビュー=>画面表示というおおまかな流れがつかめたと思います。
今後はデータベースやグラフ化などを行っていきますが、この枠組みに従ってまとめていきたいと思います。