1. Takahisa1984

    No comment

    Takahisa1984
Changes in body
Source | HTML | Preview
@@ -1,258 +1,258 @@
前提条件:
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/ にアクセスします。
<img width="1428" alt="スクリーンショット 2018-08-25 13.49.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/128347/c96c73e6-bf34-ecd4-7670-91e21189b403.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ファイルへデータを受け渡すためのコードを書いていきます。
-```
+```https://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