13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Laravel日記1 -Laravelでブログみたいなものを作る/ページの表示-

Last updated at Posted at 2018-09-17

# Laravel日記

このシリーズでは、実際にLaravelでブログみたいなものを作るための体験記を書いていきたいと思います。(割と独り言的に書きます)

Laravel体験記0では環境構築について書いてみようと思いましたが、まとめるのが大変そうなので、あとで書きます。

体験記1では、laravelインストールができたところからスタートしていきたいと思います。ちなみにQiitaも初めて書くので、書き方にまだ慣れていないです・・・

前提環境

以下環境で行います。(前述の通りLaravelインストール済の状態からスタート)

  • Laravel5.5
  • PHP7.1
  • Macのローカル環境下で開発
  • データベースはMySQL

Laravelでサーバ立ち上げ

まずはphp artisan serveでサーバ立ち上げをします。すると、Google Chromeなどのブラウザでlocalhost:8000にアクセスした際に下記のようなページが表示されます。

スクリーンショット 2018-12-13 10.59.26.png

これは一体どういうことなのでしょうか。上記内容のページが表示されている仕組みを確認してみます。

LaravelなどのMVCフレームワークと言われるものにおいては、「○○というURLにアクセスしたら■■のファイルを表示してください」という決まりを定める「ルーティング」と呼ばれる仕組みが存在しています。

下記2箇所のファイルをのぞいてみます。

route/web.php
Route::get('/', function () {
    return view('welcome');
});
resouces/views/welcome.blade.php
 <!-- 前後省略箇所あり-->
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>

これはつまり、route/web.phpにおいて「トップページ(ルートディレクトリ)にアクセスされたら、resource/views/welcome.blade.phpの中身を表示するようにしてねー」という指示がきがされており、resource/viewsフォルダ内に実際に表示されるページ内容が入っている形になります。

Laravelでトップページを作って表示してみる

では、自分でトップページの内容を作成し、ルーティング設定も自分で行ってみたいと思います。

1、index.blade.phpの作成

resouces/viewsフォルダの中に、index.blade.phpというファイルを新しく作成します。

resources/views/index.blade.php
<h1>Laravel Blog</h1>
<p>これはトップページです</p>

続いて、routes/web.phpを開き、

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

と記述。

これでhttp://127.0.0.1:8000/ にアクセスすることで、トップページを開くことができました。

newページを表示

続いて新規登録ページの作成をしたいと思います。まずは単純にファイルだけ作って何かを表示させるようにしたいと思います。

以下のように、resources/viewsフォルダ内にnew.blade.phpを作成します。

resources/views/new.blade.php
<h1>Laravel Blog</h1>
<p>これは新規登録ページです</p>

続いて、routes/web.phpを開き、

routes/web.php
Route::get('/new', function () {
    return view('new');
});

と記述。
こうすることで、http://127.0.0.1:8000/new/ とURLを叩くと、new.blade.phpが表示されます。

リンク(aタグ)を作成する。

次に、トップページから新規登録ページへのリンク、新規登録ページからトップへのリンクを作成します。

aタグを直書きしてもいいですが、せっかくLaravelを使っているので、Laravelに用意されているものを生かしてみたいと思います。

resources/views/index.blade.php
    <a href="{{url('/new')}}">新規登録</a>  
resources/views/new.blade.php
    <a href="{{url('/')}}">トップページへ戻る</a>  

これでトップページに「新規登録」と書かれたaタグが表示されて、クリックすると新規登録ページに飛べるようになります。
逆もまた然り。

次回はcssの適用をしてみたいと思います。

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?