プロデミア

laravel_Routeについて学ぶ

05Routeについて学ぶ

ここからは実際にLaravelを触り、理解を深めます。

Routeとは？

routeとは、URLとコントローラーのアクションの対応ルールのことです。対応ルールを作成することをルーティングと呼んだりします。

このURLでアクセスされた時にはこのコントローラーのアクションを呼び出してください、ということをアプリケーションにお願いするために、Laravelのバージョン5.3からはroutes/web.phpにルートを定義していきます。

このファイルをみればどのURLでどの処理が行われるのかが一目瞭然になります。ここに何も書かなければせっかく書いた処理も呼ばれることはないため、忘れずにルーティングしていきましょう。

RouteはRoutes/web.phpにあります。開いてみましょう。

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

初期値では上記の様になっているはずです。

これはhttp://localhost/にアクセス（GET処理で）するとwelcom.blade.phpを表示するという意味です。.blade.phpは省略して書くことができます。

環境構築したときウェルカムページが表示されていましたがまさにこのRouteが実行されて表示されたものです。

ちなみにwelcom.blade.phpはresources/views/welcom.blade.phpにあります。

では、resources/views/の中にhome.blade.phpというファイルを作成してみましょう。

.blade.phpという拡張子はLaravel特有の拡張子でViewの部分を作成するファイルです。

以下のひな型をコピペしてください。

home.blade.php

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>メモ帳</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div class="container">
    <div class="memo_area">
        <div class="memo_form">
            <h2>メモを追加</h2>
            <form action="">
                <input class="memo_text" type="text" name="" id="">
                <input type="submit" value="追加">
            </form>
        </div>
        <div class="memo_show">
            <div class="memo_item">
                <div class="memo_title">
                    <time>2022.10.10</time>
                    <p>サッカー</p>
                </div>
                <div class="btn_area">
                    <div class="edit_form">
                        <form action="">
                            <input type="submit" value="編集">
                        </form>
                    </div>
                    <div class="del_area">
                        <form action="">
                            <input type="submit" value="削除">
                        </form>
                    </div>
                </div>
            </div>
            <div class="memo_item">
                <div class="memo_title">
                    <time>2022.10.10</time>
                    <p>大阪旅行</p>
                </div>
                <div class="btn_area">
                    <div class="edit_form">
                        <form action="">
                            <input type="submit" value="編集">
                        </form>
                    </div>
                    <div class="del_area">
                        <form action="">
                            <input type="submit" value="削除">
                        </form>
                    </div>
                </div>
            </div>
            <div class="memo_item">
                <div class="memo_title">
                    <time>2022.10.10</time>
                    <p>メモ内容</p>
                </div>
                <div class="btn_area">
                    <div class="edit_form">
                        <form action="">
                            <input type="submit" value="編集">
                        </form>
                    </div>
                    <div class="del_area">
                        <form action="">
                            <input type="submit" value="削除">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

次にpublicフォルダの中にCSSフォルダを新しく作成し、その中にstyle.cssを新しく作ってください。

作成したstyle.cssに以下のコードをコピペしてください。

style.css

body{
    background-color: #edf2f4;
}
.container{
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}
.memo_area{
    display: flex;
    justify-content: space-around;
}
.memo_form{
    text-align: center;
    width: 40%;
}
.memo_form input[type="submit"]{
    border-radius: 5px;
    border: none;
    padding: 5px 20px;
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}
.memo_form h2{
    text-align: center;
}
.memo_text{
    display: block;
    margin: 0 auto 15px;
    border: none;
    height: 20px;
}
.memo_show{
    width: 60%;
}
.memo_item{
    background-color: #fefefe;
    display: flex;
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}
.memo_title{
    width: 90%;
}
.memo_title p{
    margin: 0;
}
.memo_title time{
    font-size: 10px;
}
.btn_area{
    display: flex;
    margin: auto;
}
.edit_form{
    margin-right: 10px;
}
.edit_form input,
.del_area input {
    border-radius: 5px;
    padding: 5px 12px;
    border: none;
}
.memo_form input[type="submit"]:hover,
.edit_form input:hover,
.del_area input:hover{
    opacity: .8;
}
.edit_form input{
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}
.del_area input{
    background-color: #d64045;
    color: #fefefe;
    font-weight: bold;
}

ページを再読み込みしてもページは何も変わりません。

これは、以下の部分を変更していないからです。

web.php

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

いくらhome.blade.phpを変更しようが今のままではwelcome.blade.phpが表示されるので、次にhome.blade.phpが表示されるようにRouteを修正しましょう。

web.php

Route::get('/', function() {
    return view('home'); // ここを変更
});

上記のように修正できたらページを読み込んでみましょう。

画像のようになっていると思います。

それでは一部コードの解説をします。

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

laravelのブレードファイルでは{{ }}で囲うことによって<?php echo ?>と同じ意味になります。（後で詳しく解説します）

今回は<?php echo asset(’css/style.css’); ?>というPHP文になります。

これはLaravelの機能になります。ブレードファイルに変数などを埋め込むときはこれから{{ }}を使うようにしましょう。

そして、asset('css/style.css')ですが、asset('ファイルパス')はpublicディレクトリのパスを返す関数となっています。

なので今回はpublicフォルダの中のcssフォルダの中のstyle.cssを指定しています。

先ほどpublicフォルダの中にcssフォルダを作成し、さらにcssフォルダ内にstyle.cssを新規作成しました。

そのstyle.cssファイルがhome.blade.phpに反映されています。

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です