---
# System prepended metadata

title: Laravel授業3回目（PaizaCloud版）

---

# Laravel授業3回目（PaizaCloud版）
## 環境構築(先週の復習)
### 【サーバーの立ち上げ】
#### 1.　ログインが完了したら新規サーバ作成をクリックするボタンが表示されます。以下の設定でサーバー作成
```
サーバ名：デフォルトでOK
web開発：PHP,Laravel
データベース：MySQL,phpMyAdmin
```
その他は設定不要
新規作成ボタンをクリック

### 【Laravelプロジェクトの立ち上げ】
#### 1. ターミナルを立ち上げてLaravelプロジェクト作成コマンドを入力
`composer create-project laravel/laravel cms 6.* --prefer-dist`

#### 2. cms(プロジェクトディレクトリ)にターミナル上で移動
`cd cms`

#### 3. ターミナル上CMS階層でComposerコマンド実行
`sudo composer update`

#### 4. ターミナル上CMS階層でBuiltInサーバーを起動：動作確認
`php artisan serve`
server startedと表示されてURLが生成されればOKです。
左側に地球で8000番ポートでプロジェクトが立ち上がっているはずです。
ブラウザで確認までいきましょう。

## 共通初期設定
### 【Laravelプロジェクト初期設定】
#### 1. データベースを作成
エディタ左側の一番上に🔽ボタンをクリックすると下の方にMySQLがあるのでStart MySQLをクリックしてMySQlを起動
phpMyAdminのタブ内のOpen phpMyAdminをクリックして起動
phpMyAdminの管理画面からc9というデータベースを作成。

```
DB名：c9
照合順：utf8mb4_general_ci
```
#### 2. env（ファイル内の同じ箇所を上書き）
＊隠しファイル表示はエディタ左側ファイル階層で右クリック

```
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=c9
DB_USERNAME=root
DB_PASSWORD=
```

#### 3. /app/Providers/AppServiceProvider.php ファイルを修正
```
 use Illuminate\Support\Facades\URL;    //この行を追加
 
 public function boot() {
   URL::forceScheme('https');          //この行を追加
 }
```
#### 4. サーバーの再起動
envファイルなどの設定を書き換えたときは必ず再起動！！
サーバー起動後のターミナル上で
`Ctrl + C`

#### 5. 表示の仕組みをチェックしてみる！
/resouces/views/welcome.blade.php を編集して見よう！
ブラウザ・更新で確認 →　変更確認できればOK

## ログイン認証
### 【ログイン認証実装】
#### 1. マイグレーションを実行
`php artisan migrate`

#### 2. laravel/ui パッケージをインストール
`composer require laravel/ui:^1.0 --dev`

#### 3. artisan コマンドを実行
`php artisan ui vue --auth`

#### 4. npmパッケージをインストール
`npm install`

#### 5. パッケージをビルド
`npm run dev`

## メール送信機能実装
### 【Mailtrap】
#### 1. アカウント作成
https://mailtrap.io/

#### 2. メール情報を確認
Inboxes>Demo inbox>SMTP Setting>Integrations>Laravel
を選択するとLaravelの.envに記述する内容が表示される。

#### 3. メールアドレスの確認
Inboxes>Demo inbox>Email Adressから自分のメールアドレスが確認できる

### 【Mail送信処理を作成】
#### 1. .envファイルに設定情報を記述
```
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=*************** //自分のmailtrapのユーザーネーム
MAIL_PASSWORD=***************　//自分のmailtrapのパスワード
MAIL_ENCRYPTION=tls
```

#### 2. サーバー再起動（cms階層で）
`Ctrl　＋　C`
`php artisan serve --port=8080`

#### 3. mail.blade.phpを作成して以下をコピペ
```
@extends('layouts.app')
@section('content')

<form action="{{ url('/mail/send') }}" method="post" enctype="multipart/form-data">
    {{ csrf_field() }}
        <div class="form-group">
            <label for="exampleInputEmail1">Eメールアドレス</label>
            <input type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="Eメールアドレス">
            <small class="text-muted">あなたのメールは他の誰とも共有しません。</small>
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">サンプルテキスト</label>
            <input type="text" class="form-control" name="text" id="exampleInputEmail1" placeholder="送りたい文字列">
        </div>
    <button type="submit" class="btn btn-primary">送信する</button>
</form>

@endsection
```

#### 4. web.phpにルーティングを二つ追加
```
//メール送信フォームを表示
Route::get('/mail', 'MailController@index');

//メール送信処理
Route::post('/mail/send', 'MailController@send');
```

#### 5. MailControllerを作成
`php artisan make:controller MailController`

#### 6. MailController内に以下を追記
`use Mail;`

#### 7. MailController内にindex処理を追記
```
//メールフォーム表示
public function index(){

    return view('mail');

}
```

#### 8. MailController内にsend処理（送信処理）を追記
```
// メール送信処理
public function send(Request $request){

    $email = $request->email; //送信先アドレス取得
    $text = $request->text; //送信テキスト取得
    // dd($text);

    // メール送信処理（//view/emails/test_mail_text.blade.phpにデータを送る）
    Mail::send(['text' => 'emails.test_mail_text'], [
        'text'=>$text , //送りたい情報
    ]
    , function($message) use($email) {

        $message
            ->from('info@test.jp')
            ->to($email)
            ->subject("テストメールだよ！");
    });

    return redirect('mail');

}
```

#### 9. viewsフォルダの直下にemailsフォルダを作成してその中にtest_mail_text.blade.phpを作成して以下をコピペ
```
テストメールです

以下は入力した内容
==========================

{{$text}}

==========================
```

## 画像アップロード機能
### 【画像アップロード処理】
#### 1. userのマイグレーションファイルに以下を追加
`$table->string('img_url')->nullable();//追記！！！`
```
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->string('img_url')->nullable();//追記！！！
        $table->rememberToken();
        $table->timestamps();
    });
}
```
#### 2. migrate　refreshしてテーブルにカラム追加実行
`php artisan migrate:refresh`

#### 3. 画像処理をまとめるcontroller作成
`php artisan make:controller ImgController`

#### 4. web.phpにルーティングを2つ追加
```
//画像アップロード画面表示
Route::get('/img','ImgController@index');

//画像アップロード処理
Route::post('/img/upload','ImgController@upload');
```

#### 5. views直下にimg_upload.blade.phpファイルを作成して以下をコピペ
```
@extends('layouts.app')
@section('content')

@if ($errors->any())
<div class="errors">
     <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
     </ul>
</div>
@endif

<form action="{{ url('/img/upload') }}" method="post" enctype="multipart/form-data">
    {{ csrf_field() }}
    <div class="form-group">
        <input id="fileUploader" type="file" name="img" accept='image/' enctype="multipart/form-data" multiple="multiple" required autofocus>
    </div>
    <button type="submit" class="btn btn-primary">送信する</button>
</form>

@endsection
```

#### 6. ImgControllerに以下4行を追記
```
use Validator;
use Auth;
use Illuminate\Support\Str;
```

#### 7. ImgControllerに表示処理作成
```
//画像アップローダー表示
public function index(){

    return view('img_upload');

}
```
#### 8. ImgControllerに画像アップロード処理作成
```
// 画像アップロード処理
public function upload(Request $request){

   // バリデーション 
    $validator = $request->validate( [
        'img' => 'required|file|image|max:2048', 
    ]);

    // 画像ファイル取得
    $file = $request->img;

    // ログインユーザー取得
    $user = Auth::user();

    if ( !empty($file) ) {

        // ファイルの拡張子取得
        $ext = $file->guessExtension();

        //ファイル名を生成
        $fileName = Str::random(32).'.'.$ext;

        // 画像のファイル名を任意のDBに保存
        $user->img_url = $fileName;
        $user->save();

        //public/uploadフォルダを作成
        $target_path = public_path('/uploads/');

        //ファイルをpublic/uploadフォルダに移動
        $file->move($target_path,$fileName);

    }else{

        return redirect('/home');
    }

    return redirect('/img');

}
```
### 【画像表示処理】
#### 1. img_upload.blade.phpのフォームの直下に以下を追記
```
@if($user->img_url)
    <img src="/uploads/{{ $user->img_url }}">
@endif
```

#### 2. ImgControllerのindex処理を以下に変更
```
//画像アップローダー表示
public function index(){

     $user = Auth::user();

    return view('img_upload',[
        'user'=>$user
        ]);

}
```

#### 3. 最後にImgControllerにログインユーザーのみの指定をする
```
//ログインユーザーのみ使える機能にする　これを追加する！順番重要です！最初にログイン確認です。
public function __construct()
{
    $this->middleware('auth');
}

//画像アップローダー表示
public function index(){
省略
}

//画像アップロード処理
public function upload(Request $request){
省略
}
```
## Gateを使ったログイン認証切り分け
> 今回は一番簡単な０と１のflagを使った直接管理
> 0の時は無料会員
> 1の時は有料会員
### 【Userテーブルにflag管理カラム追加】
#### 1.userテーブルにflagを追加する為にマイグレーションファイルに下記追加

`$table->integer('flag')->default(0);`

#### 2.migrate　refreshしてテーブルにカラム追加実行
`php artisan migrate:refresh`

### 【Gate処理の作成】
#### 1.AuthServiceProvider.phpのboot()メソットの中に処理を追記
```
//プレミア会員用のみ許可（flagが1の人のみ許可）
Gate::define('premier-only',function($user){

    return($user->flag == 1);
});
```

#### 2.web.phpに認可した場合のGroupを作成しその中にプレミア会員向けルーティングを入れる
```
// プレミア会員用のルーティング
Route::group(['middleware' => ['auth', 'can:premier-only']], function () {

    Route::get('/premier', 'HomeController@premier_index')->name('premier');
});
```


## ページ毎にCSSを実装したい場合
#### 1. views/layout/app.phpのheadタグ内に以下を追記
` @stack('css')`
#### 2. publicのcssフォルダの中にオリジナルCSSファイル（〇〇.css）を作成
#### 3.呼び出したいbladeの＠extends()の直下に記述
```
@push('css')
    <link href="{{ asset('css/〇〇.css') }}" rel="stylesheet">
@endpush
```
## ページ毎にjsを実装したい場合
#### 1. views/layout/app.phpのbody終了タグ直前に以下を追記
` @stack('js')`

#### 2. publicのjsフォルダの中にオリジナルJSファイル（〇〇.js）を作成
#### 3.呼び出したいbladeの@endsectionの直上に記述
```
@push('js')
    <script src="{{ asset('js/〇〇.js') }}"></script>
@endpush
```
##### レイアウトの組み方などの参考記事
https://nodoame.net/archives/10756

https://qiita.com/yktk435/items/cc606f915859872eec9a

https://engineering.mobalab.net/2019/03/08/laravel%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AEinclude-yield-section%E3%81%AE%E9%81%95%E3%81%84/