yps task6 Laravel ToDoアプリ 



さあ！やってきましたYPS！！
今回はtask6ってことでかなり濃厚な内容となっております！！

・Laravelを使ってのToDoアプリ模写　https://blog.hrendoh.com/laravel-6-setup-bootstrap4-with-laravel-ui/
・ログイン機能追加
・メール認証機能追加　https://t.co/oSoyYZkY4D

では行ってみましょう！！！！！

まずは新規プロジェクト作成

cd /var/www/html
composer create-project --prefer-dist laravel/laravel myapp2 "7.*" ←この7、＊ってのはバージョンらしい
cd myapp2
composer require laravel/ui "2.*" ←これはver７の場合エラーが出るから"2.*"に指定してあげる必要がある
npm install
php artisan ui bootstrap --auth
npm install cross-env ←これはcross-envとは
WindowsでNODE_ENV=productionのように環境変数を設定すると、コマンドプロンプトが停止してしまいます。
cross-envはそういったプラットフォームの差異を吸収してくれるパッケージです。Nuxt.jsやNext.jsでも公式に紹介されています。
とのこと、んまあenvをcrossoverする感じかな？
npm run dev　←これをすると何かファーっと組み上げるみたい
ここでエラーになったら
rm ./package-lock.json
rm -rf ./node_modules/
npm install してからも一回ランデブー
npm run dev

sudo vi /etc/nginx/conf.d/default.conf 

/var/www/html/yps/public;
を
/var/www/html/myapp2/public;
に置換て再起動します
sudo systemctl restart nginx && sudo systemctl restart php-fpm 
phpMyAdminも使える様にします
cd ../yps/public/
unlink pma 
cd -
sudo ln -s /usr/share/pma/ /var/www/html/myapp2/public/pma 

php artisan cache:clear && php artisan config:clear && php artisan route:clear && php artisan view:clear 
composer clear-cache && composer dump-autoload --optimize 
sudo chown -R centos:nginx /var/www/ 
sudo chmod -R 777 storage/ bootstrap/cache/
ブラウザでアクセスしてlaravelのwelcome画面になってたらおk
php artisan make:model Task -m 
これで作られたモデルとマイグレーションに模写サイトのコードをコピペ
データベースを作ります
mysql　-u root -p 
create database myapp2db;
exit
.envを編集
vi .env 
DB_DATABASE=myapp2db                                                                                
DB_USERNAME=root
DB_PASSWORD="パスワード" ←mysqlのパスワーど

マイグレイトしてテーブルを追加します
php artisan migrate
確認します
mysql -u root -p -D myapp2db 
show tables;
+--------------------+
| Tables_in_myapp2db |
+--------------------+
| failed_jobs        |
| migrations         |
| password_resets    |
| tasks              |
| users

ここまでyotaroさんが用意してくれた
こっからやったこと
コントローラー作成
php artisan make:controller TaskController --resource --model=Task

all();
            Task::create($inputs);
    
            return redirect()->route('tasks.index')->with('message', 'Task created successfully.');
        }
    
        public function show(Task $task)
        {
            return view('tasks.show', compact('task'));
        }
    
        public function edit(Task $task)
        {
            return view('tasks.edit', compact('task'));
        }
    
        public function update(Request $request, Task $task)
        {
            $inputs = $request->all();
            if (!isset($inputs['completed'])) $inputs['completed'] = false;
            $task->update($inputs);
    
            return redirect()->route('tasks.index')->with('message', 'Task updated successfully.');
        }
    
        public function destroy(Task $task)
        {
            $task->delete();
    
            return redirect()->route('tasks.index')->with('message', 'Task deleted successfully.');
        }
    }

ルートの変更


resources/views/layout.blade.phpを作成←これはgitの中身をコピペした
viewsのディレクトリを作成
mkdir resource/views/tasks 
中にindex,create,show,editのblade.phpを作成
index.blade.phpの中身

// resources/views/tasks/index.blade.php
    
    
    
    
      
      
    
      
      
    
      {{ config('app.name', 'Laravel') }}
    
      
      
    
      
      
      
    
      
      
    
    
    
    
      

    
      

        @if(session('message'))
        
        @endif
    
        @yield('header')
        @yield('content')
      

    
      @yield('scripts')
    
    
    
    
    その他のテンプレートはサイトのgitを確認してコピペ

    ここまででだいぶ出来てるけど色々な接続がうまく行ってない
    まず、welcome画面からログイン
    そのさきのページをtasks.indexにしたい
    デフォルトではhomeに飛んじゃって無限ループに陥る
    そこでtasks.indexに飛ぶボタンを追加（これはどっかのボタンをコピペ）
    これで入れる様になった

    ↑これでもいいがもっと簡単なやり方があった
    appのprovidersのRouteServiceProvider.phpに
    public const HOME = '/home';
    これを
    public const HOME = '/tasks';
    にする。これだけでログイン後飛べる


　　　
    あ、Font Awesomeについては
    npm install @fortawesome/fontawesome-free --save-dev 
    npm install font-awesome-scss save-dev 
    んで
    resources/sass/app.scss に
    
        // Font Awesome
        @import '~@fortawesome/fontawesome-free/scss/fontawesome';
        @import '~@fortawesome/fontawesome-free/scss/solid';
        @import '~@fortawesome/fontawesome-free/scss/regular';
        @import '~@fortawesome/fontawesome-free/scss/brands';
        
        ↓これはDatePickerの
        // Tempus Dominus
        @import '~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4-build';
    
    これ追加
    んでビルドし直し
    npm run dev 
    なんかちょっと反映に時間かかるっぽい
    放置して次
    DatePicker(カレンダーで日付入力）
    npm install moment --save-dev
    npm install tempusdominus-bootstrap-4 --save-dev
    なんかmoment.jsはグローバル変数にセットする必要があるらしい
    resources/js/bootstrap.jsに追記
    
        // resources/js/bootstrap.js
        /**
         * Import moment js
         */
        import moment from 'moment';
        window.moment = moment;
        
        require('tempusdominus-bootstrap-4');
        $('.datetimepicker').datetimepicker({
          icons: {
            // Font Awesome 5には「fa-clock-o」がなくなっているので指定する
            time: 'far fa-clock'
          },
          format: 'YYYY-MM-DD'
        });
    
        が、これだけではダメで
        due_dateのclassタグに　
        id="due_date" を追記
        こんな感じ
        
            

        
        これでいけたと思う

        あとはメール認証
        とりあえず.envを編集
        MAIL_MAILER=smtp
        HOST=smtp.gmail.com
        MAIL_PORT=587
        MAIL_USERNAME=自分のメアド
        MAIL_PASSWORD=これがちょっと違う
        MAIL_ENCRYPTION=tls
        MAIL_FROM_ADDRESS=自分のメアド@gmail.com
        MAIL_FROM_NAME="${APP_NAME}"    

        gmailでやった
        ブラウザでgmailのサイトへ
        アカウントから、セキュリティー、googleへのログイン
        アプリパスワード（二段階認証してないと表示されない）
        アプリパスワードを生成
        .envのMAIL_PASSWORDへコピペ
        とりあえずこんなもんだった気がする
        
        あとuserモデルのclass User extends Authenticable の後に
        implements MustVerifyEmailを書く
        
        route のweb.phpのAuth::routes(); の中を変更
        Auth::routes(['verify' => true]);
        

        あ。あとルートの設定
        メール認証されたユーザしかtasks以降を見れない様にするルートの取り方
        色々やったけど
        Route::resource('tasks','TaskController')->middleware('verified');
        これだけだった。やっぱ先生違う

        以上、ではまた！！