# 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/