はじめに

Laravelとは、Webに特化したPHPフレームワーク。セキュリティ対策(CSRF対策など)もこれでできます。MVCアーキテクチャを採用しています。今回から、Laravelで簡単なメモアプリを作っていきます。今回は、Viewの作成と表示までできればいいかなって思っています。

Laravelで簡単なメモアプリを作る（2）~データの取得と保存~
Laravelで簡単なメモアプリを作る（3）~データの更新と削除~

今回の目標物

アプリの雛形を作る

laravelのセットアップについては、こちらにまとめています。
laravelのセットアップ(Mac)
laravelのセットアップ(Windows)

laravel new memoApp でアプリの雛形を作る。
xampp(mamp)のフォルダーの中にあるhtdocsフォルダーの中に、先ほどできたmemoAppというフォルダを入れる。

MVCアーキテクチャ

MVCアーキテクチャとは、見える部分であるViewと、データベースを取り扱うModelと、その二つとユーザーを繋げるControllerからなるアーキテクチャのことである。

Viewを表示する場合

データベースに、データを保存する場合

Viewを表示させる

Viewを作る

resources/viewsフォルダ内にhome.blade.phpとsubmit.blade.phpを作成する。
拡張子が.htmlではなく.blade.phpであることに注意する！

home.blade.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>home画面</title>
</head>

<body>
    <h1>ホーム画面です。</h1>
</body>

</html>

submit.blade.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>submit画面</title>
</head>

<body>
    <h1>メモ追加画面です。</h1>
</body>

</html>

コントローラーを作る

ディレクトリをmemoAppまで移動し、以下のコマンドを打つ。

$ php artisan make:controller MemoController

app/Http/Controllersフォルダ内のMemoControllerに、Viewを表示する関数を記述する。

MemoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MemoController extends Controller
{
    // home.blade.phpを表示
    public function showHome()
    {
        return view('home');
    }

    // submit.blade.phpを表示
    public function showSubmit()
    {
        return view('submit');
    }
}

実は、まだこれだけでは動かない！実は、laravelにはMVC(Model, View, Controller)に加え、web.phpという大事なファイルが存在する。

routesフォルダ内のweb.phpに、以下の内容を記述する。

web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

// 第一引数に相対パス、第二引数に関数を指定する
Route::get('/home', 'MemoController@showHome');

Route::get('/submit', 'MemoController@showSubmit');

表示の確認

XAMPP(MAMP)のサーバーを立ち上げて、http://localhost/memoApp/public/home とhttp://localhost/memoApp/public/submit にアクセスしてみる。

メモアプリのViewを作る

テンプレートの利用

laravelには、テンプレートというデザインを統一するための仕組みが存在します。詳しくはこちらを参考にしてください。

resources/viewsフォルダ内にlayoutsフォルダを作成し、そのフォルダの中に、app.blade.phpを作成する。

resources-
         |-views
             |-layouts
             |    |-app.blade.php
             |
             |-home.blade.php
             |-submit.blade.php

layouts/app.blade.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MemoApp</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"
        integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
        integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous">
    </script>
</head>

@yield('css')

<body>
    <header>
        <span class="title">MemoApp</span>
    </header>
    <div class="container">
        @yield('content')
    </div>
</body>

</html>

テンプレートの読み込み

テンプレートは、@extends()で読み込むことができる。また、@section()のなかに記述した内容がテンプレートの@yield()に埋め込まれることになる。