Laravel メモ

Biyori

Docker on WSL2 の場合
php artisan serve --host 0.0.0.0

Biyori

php artisan route:list でルーティングの確認ができる

Biyori

とりあえずDocker（Dockerfile）はこれで動かしてる。要改善。

FROM php:latest

RUN apt update \
  && apt -y install git zip unzip vim 

RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer

WORKDIR /var/www/html

コマンド
docker compose up -d --build

Biyori

artisan はグローバルにしてphpを指定しなくても実行できるようにしたい

Biyori

Docker上で開発するときコマンドの実行が遅い。
ここら辺が参考になる？

https://hi97.hamazo.tv/e8859609.html

Biyori

routesにControllerを追加するときの定型句

use App\Http\Controllers\HelloController;

Route::get('/hello', [HelloController::class, 'index'])->name('index');

Controller内でViewを呼び出す。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HelloController extends Controller
{
    //
    public function index() {
        return view('hello');
    }
}

Biyori

フォーマッターの設定

"[php]": {
  "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},

Biyori

docker composeで立ててもすぐに終了するのはtty: trueがないからっぽい。stdin_open: trueも付けるといいらしい。両方付けて-it相当になる。
ここらへんが参考になりそう。

Biyori

docker-compose.yml

version: '3'

services:
  php:
    container_name: php
    tty: true
    stdin_open: true
    build:
      dockerfile: "./Dockerfile"
    volumes:
      - "./src:/var/www/html"

Biyori

Viewに値を渡すには以下のように書く。

public function index(Request $request)
{
    return view('hello', ['params' => $request->all()]);
}

View（Blate）側は以下のようにして変数にアクセスする。

<input name="A" type="text" value="{{ $params['A'] }}">

Biyori

$request->input('name')で個別に値を取得できる

Biyori

POSTのボタンを追加してPOSTボタンで遷移しようとしたら419画面が表示された。CSRFの問題っぽい。
View側に@csrfを追加することで回避できる。

  <form method="POST" action="{{ route('hello') }}">
    @csrf
    <label>A: <input name="A" type="text" value="{{ $params['A'] }}"></label>
    <label>Submit <input type="submit" value="データ送信"></label>
  </form>

Biyori

同じデータを別形式（enctypeを指定）で送るとサイズが変わるのか確認。

enctype="application/x-www-form-urlencoded"

enctype="multipart/form-data"

enctype="text/plain"

なぜかtext/plainだと419の画面が表示された。今は非推奨な値なので対応してないのかも。
比較するとapplication/x-www-form-urlencodedが一番サイズが小さそう。

Biyori

HTMLのフォームでPUTやDELETEなどのメソッドタイプは対応してないそう。仕様として存在しないのだとか。
フレームワークによっては対応できるが、JavaScriptで対応するのが良さそう
https://teratail.com/questions/268315

Biyori

Laravel 10はViteを使っているので、JavaScriptを使うにはHTMLに@vite(['resoutes/path/resource'])を追加する。

<!doctype html>
<head>
    {{-- ... --}}

    @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/hello.js'])
</head>

あとvite.config.jsのinputに読み込むファイルを追加する。
これはHTMLから読み込むファイルだけを指定すればいい。JavaScriptファイル内で読み込むモジュールファイルは指定不要。

input: [
    "resources/css/app.css",
    "resources/js/app.js",
    "resources/js/hello.js",
],

Biyori

JSONで送りたい場合はこんな感じ？buttonのtypeをbuttonにしないとデフォルトでsubmitなのでGETリクエストが投げられる。

  <div>POST: JSON</div>
  <form name="jsonForm">
    @csrf
    <label>A: <input name="A" type="text" value="{{ $params['A'] }}"></label>
    <label>Submit <button type="button" id="submitButton" value="データ送信"></label>
  </form>

import axios from "axios";

const submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", () => {
    const formData = new FormData(document.jsonForm);
    const jsonObject = {
        A: formData.get("A"),
    };
    formData.set("json", JSON.stringify(jsonObject));
    axios.post("/hello", formData);
});

Laravel側では次のようにして切り替えている。

public function index(Request $request)
{
    if ($request->exists('json')) {
        $jsonData = json_decode($request->input('json'), true);
        return view('hello', ['params' => $jsonData]);
    }
    return view('hello', ['params' => $request->all()]);
}

Biyori

Docker（docker-compose）のネットワークよくわからないのでどこかでいろいろ試したい気持ち

Biyori

docker-compose.yml で作った場合の接続先はサービス名になる。以下の場合、MySQLのDBに接続するにはdatabaseになる。

version: '3'

services:
  php:
    container_name: php
    tty: true
    stdin_open: true
    build:
      dockerfile: "./Dockerfile"
    volumes:
      - "./src:/var/www/html"
    ports:
      - 9003:9003
  database:
    image: mysql:latest
    container_name: database
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: database
      MYSQL_USER: mysql
      MYSQL_PASSWORD: mysql
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./db/data:/var/lib/mysql
      - ./db/my.cnf:/etc/mysql/conf.d/my.cnf
    ports:
      - 3306:3306

Biyori

パスワードとかユーザ名は環境変数として外に出したほうがいいのであとで対応する

Biyori

artisan のマイグレートコマンド

php artisan make:migration create_books_table --create=books
php artisan migrate
php artisan migrate:rollback
php artisan migrate:reset