大企業営業から未経験ITエンジニアを目指すブログ

アラサー大企業営業から未経験ITエンジニアを目指すブログ。日々学んだことを忘備録的に記します。

Laravel 6.0プロジェクトの作り方(認証含む)

composerインストール済

①メモリ開放

 sudo sh -c "echo 3 > /proc/sys/vm/drop_caches"

 

②Laravelプロジェクト作成

 1. プロジェクトを作成するフォルダへ移動

 2. コマンド

   composer create-project --prefer-dist laravel/laravel project_name "6.*"

  ・・・自動で6.0の最新を選択してくれる

 

③Gitの管理下に置く

 Laravelフォルダに移動して

   git init → git add .  →git commit

   ※初期状態で一旦保存しておく

 

④データベースと接続

 1. .envファイルのデータベース関連の情報を修正

  DB_CONNECTION=mysql

  DB_DATABASE=project-name ※あとで作成するDatabase名の通りにする

  DB_USERNAME=abcde

  DB_PASSWORD=password

 2. データベース作成

  sudo service mysqld start MySQLサーバ起動

  mysql -u abcde -    ログイン

  CREATE DATABASE `project-name` データベース作成

 3. 接続確認

  php artisan tinker

  DB::connection(); →エラーが出なければOK

 

タイムゾーンの設定

 config/app.phpファイルの下記を修正

 'timezone' => 'Asia/Tokyo',

 'locale' => 'ja',

 

 ⑥テーブル設計前の初期設定

 app/Providers/AppServiceProvider.phpのbootメソッドに追記

  public function boot()
 {
  \Schema::defaultStringLength(191);
 }

https://readouble.com/laravel/6.x/ja/authentication.html

 

vagrant + centos7で仮想環境で見れるようにする

⑦-1. /etc/httpd/conf.d/vhost.confファイルを編集 ※Laravelの場合

<VirtualHost *:80>
DocumentRoot /var/www/html/project/public
ServerName localhost.project
</VirtualHost>

 

⑦-2. ホストPCの設定

C:\Windows\System32\drivers\etc\hostsファイルを編集

192.168.33.10 url.url

(ブラウザから検索するときにhttp://の後に入力する文字を数字の後に記載)

 

⑧ 認証一括作成

(プロジェクトフォルダで)composer require laravel/ui "^1.0" --dev

 ※引っかかった記録は下記。

rintaro2019.hatenablog.com

 php artisan ui vue --auth

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

 

ホストOSにのプロジェクトフォルダに移動して下記。
npm install

npm run dev

 ※引っかかった記録は下記。

rintaro2019.hatenablog.com

 

 npm run watch ←これをすると、変更があるたびに自動でコンパイルしてくれる

 

 ■マイグレーション→モデル→ルータ・コントローラ・ビュー

 

⑦基本のデータを作成

⑦-1. CSSファイル

/public/css/app.cssファイルを作成し、cssを記述。

asset()関数を使うとpublicディレクトリ内のリソースを読み込める。

<link rel="stylesheet" href="{{ secure_asset('css/app.css') }}">

https://qiita.com/kotsuban-teikin/items/9b00d0faa0b7eaf70796

■Sass(Scss記法)

メディアクエリを書いておく。今回は基本をスマートフォン、指定した場合にPC用とする。

https://www.tam-tam.co.jp/tipsnote/html_css/post10708.html

 

 

⑦-2. jQueryを使う

(1) jQueryを利用する場合は、下記を記述すると自動で全jQueryリクエストヘッダにトークンを足してくれる。

<meta name="csrf-token" content="{{ csrf_token() }}">

※下記の代わりになる。

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

https://readouble.com/laravel/6.x/en/csrf.html

(2) metaタグにjQueryCDNを読み込み。(ダウンロードでも可)

下記から選んでコードをコピー、headに貼り付け。

https://code.jquery.com/

(3) jsファイル作成

head内、必ず(2)より下に!!jsファイル読み込みを記述。

<script src="{{ secure_asset('js/app.js') }}"></script>

/public/js/app.jsファイルを作成。