1. Takahisa1984

    Posted

    Takahisa1984
Changes in title
+Laravel でベーシックなWEBサイトを作る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,255 @@
+前提条件:
+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ファイルへデータを受け渡すためのコードを書いていきます。
+
+```
+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
+```
+の中の内容に、それぞれ対応しています。そうして各ページのコンテンツを表示させています。
+
+
+次回は、お問い合わせの処理のところを書く予定です。