1. Takahisa1984

    No comment

    Takahisa1984
Changes in body
Source | HTML | Preview

前提条件:
composer、PHP >= 7.0.0 且つ、Mysql5.7*が使用可能な状態のMacであること

まずはどこかにディレクトリを作って、そこに移動しましょう。

$ mkdir larabasicweb
$ cd larabasicweb

移動したら、新規にlaravelプロジェクトを作ります。 バージョンに5.5を指定して最新版をインストールします。

$ composer create-project laravel/laravel larabasicweb "5.5.*"
Application key XXXXXXXXXうにゃうにゃでます set successfully.

set successfully. と出ていたらインストールが完了です。インストールが終わりましたら、今作成したプロジェクトのディレクトリへ移動しておきましょう。
また、エディタでもプロジェクトを開いておきます。

$ cd larabasicweb

リポジトリの初期化とコミットをしておいても良いでしょう。

$ git init
$ git add .
$ git commit -m "init Laravel Project"

それでは、下記のコマンドを入力し、早速サーバーを起動して確認してみましょう。

php artisan serve

http://localhost:8000/ にアクセスします。

スクリーンショット 2018-08-25 13.49.26.png

この画面が出ていたら成功です。

次にビューファイルを作成しましょう。

カレントディレクトリから、resources ディレクトリを探して、その中にある、viewsというディレクトリの中を見てみましょう。
welcome.blade.phpというファイルがひとつだけあるかと思います。それが今表示に使われている、bladeと呼ばれるテンプレートエンジンのファイルになります。 Laravel では、Blade と呼ばれるテンプレートエンジンが使われています。

早速、このビューファイルを作成して行きます。
viewsディレクトリ以下に、下記の3つのファイルを作成しましょう。 ※コマンドではなく手動で作成します。

home.blade.php
about.blade.php
contact.blade.php

ここまでできたら、それぞれのビューファイル(bladeテンプレート)を表示する作業に移ります。

下記のコマンドを入力して Controller を作りましょう。
クライアントがアクセスすると、呼び出されたコントローラからテンプレートが読み込まれて、テンプレートエンジン(balde)によって、レンダリングされるイメージです。

php artisan make:controller PagesController

Controller created successfully.と表示されれば完了です。

Controller は、appディレクトリの中の、Httpの中にある、Conttollersディレクトリに作成されます。
app/Http/Controllers/PagesController.php という構成ですね。

PagesController.php が作成できたら、そのファイルを開いてましょう。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PagesController extends Controller
{
    //
}

開いたら、この中の、PagesControllerクラスの中に、先ほど作ったbladeファイルへデータを受け渡すためのコードを書いていきます。

class PagesController extends Controller
{
    // Homeを表示
    public function getHome(){
      return view('home');
    }

    // Aboutを表示
    public function getAbout(){
      return view('about');
    }

    // Contactを表示
    public function getContact(){
      return view('contact');
    }
}
//madewithvuejs.com/
class PagesController extends Controller
{
    // Homeを表示
    public function getHome(){
      return view('home');
    }

    // Aboutを表示
    public function getAbout(){
      return view('about');
    }

    // Contactを表示
    public function getContact(){
      return view('contact');
    }
}

これで、先ほどの3つのbladeファイルへ、データが受け渡されるようになりました。
次に、ルーティングの設定をしておきましょう。
routes/web.php のファイルを開いて、下記のように記載すればOKです。
ルーティングの設定をすることで、いよいよ、ビューが表示されるようになります。

<?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('/', 'PagesController@getHome');
Route::get('/about', 'PagesController@getAbout');
Route::get('/contact', 'PagesController@getContact');

ファイルを上書き保存したら、http://localhost:8000/about, /homeでも良いのので確認してみましょう。
すると、ブラウザの画面上にはまだ何も表示されていませんが(bladeファイルに何も書いていないため)、ビュー自体は出力できているはずです。

試しに、about.blade.php へ、

<h1>あああ</h1>

でも良いので、入力して上書き保存し、ブラウザから確認してみましょう。表示されておりますでしょうか。

簡単に、このルーティングファイルの説明をしておきますと、'/'や'/about'へ、getリクエストをしたときに、PagesController.phpが動き、@以下にある、先ほどPagesControllerに書いた、getHomeメソッドや、getAboutメソッドが対応してデータをビューに受け渡すという処理の流れをしています。

ここからは、bladeテンプレートについてもう少し見ていきましょう。
まずは、resources/views/に、新たに layouts ディレクトリを作成しましょう。
そこには、下記のファイルを作成しておきます。

app.blade.php

ファイルを開き、下記のように書いて保存しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <head>
    <meta charset="utf-8">
    <title>larabasicweb</title>
    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    @include('inc.navbar')
    <div class="container">
      <div class="row">
        <div class="col-md-offset-2 col-md-8 col-lg-8">

          @yield('content')
        </div>
      </div>
    </div>
    <footer id="footer" class="text-center">
      <p>Copyright 2018 &copy; takabo </p>
    </footer>
  </body>
</html>

それが済んだら、今度は、
resources/views/に、新しく inc ディレクトリを作成し、以下のbladeファイルを作成しましょう。

navbar.blade.php

   <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">larabasicweb</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="{{Request::is('about') ? 'active' : ''}}"><a href="/about">私について</a></li>
            <li class="{{Request::is('contact') ? 'active' : ''}}"><a href="/contact">お問い合わせ</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

それでは、ブラウザから確認してみましょう!

bootstrap が適用されて割と綺麗に表示されているかと思います。
あれ? とお思いかもしれませんが、Laravel には、標準でbootstrapが組み込まれてるからなんですね。
それは、app.blade.php の中の下記のコードを書くことで適用されます。

<link rel="stylesheet" type="text/css" href="/css/app.css">

ここまで確認できたところで、少しbladeの説明をします。

home.blade.phpや、about.blade.phpの中に、

extends('layouts.app')

という箇所があるかと思います。これは、layoutsディレクトリの中のapp.balde.phpを継承しているということです。
そのため、app.blade.phpを各ページ共通のファイルとして使いまわすことができています。

そして、app.blade.php の中に、

@yield('content')

という箇所があるかと思います。これは、home.blade.php や about.blade.php の中の、

@section('content')

@endsection

の中の内容に、それぞれ対応しています。そうして各ページのコンテンツを表示させています。

次回は、お問い合わせの処理のところについて解説を書く予定です。

コード全体を見たい方は以下のリンクからどうぞ!
https://github.com/thousandbeach/laravelbasicweb