アプリケーションのログイン画面を作ります。

尚、画面のみの作成です。ログインの仕組みは後々作ろうと思います。

資材の作成

まずは　http://localhost/MemoryMap/public/login　のURLでログイン画面が表示されるようにします。

コントローラを作成し　’/login’ 　でログイン用のviewファイルを動かします。コマンドから以下を入力します。

php artisan make:controller MemoryMapController

MemoryMap/app/Http/Controllers　配下に　MemoryMapController.php　ができました。

次にviewファイルを作ります。

MemoryMap/resources/views　配下に　login.blade.php　を作ります。

中身はHTMLになります。

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

<head>
    <meta charset="UTF-8">
    <title>思い出ＭＡＰ</title>
    <link rel="stylesheet" type="text/css" href="css/login.css" media="all">
</head>

<body>
    <h1>思い出<span>ＭＡＰ</span></h1>
    <img src="image/map.png" alt="画像表示"><br>
    <form action="/MemoryMap/public/displayMap">
        <p class="label">ID</p>
        <input id="id" class="in" /><br>
        <p class="label">パスワード</p>
        <input id="pass" class="in" /><br>
        <input type="submit" value="ログイン" class="btn">
    </form>
</body>

</html>

　cssファイルは　MemoryMap/public/css　に配置します。

これで資材は揃ったので紐づけを行います。

ルーティングの設定

まずは　MemoryMap/routes/web.php　を編集します。

Route::get('/login', 'MemoryMapController@toLogin');

これで ‘/login’ でアクセスされた時に、MemoryMapControllerのtoLoginアクションが実行されます。

コントローラーの編集

次は　MemoryMap/app/Http/Controllers/MemoryMapController.php　を編集します。

class MemoryMapController extends Controller
{
     // ログイン画面を返却する
     public function toLogin(){
        return view('login');
    }
}

これで、login.blade.phpが返却されます。

これで　http://localhost/MemoryMap/public/login　のURLでログイン画面が表示されます。

次回はGoogleMapを表示させます。