Laravel開発手順　基本機能編　Docker利用

2022年2月5日 12:33

Dockerを起動しておく

Larabelをインストールする

//現在指定しているパスを初期化
cd
//デスクトップを指定する（どこでもいい）
cd Desktop
//ターミナルにて
curl -s "https://Larabel.build/〇〇"  | bash

〇〇には好きなフォルダ名を入力

拡張機能をダウンロード

Laravel Blade Snippets は以下のリンクから導入できます。

https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

EditorConfig for VS Code は以下のリンクから導入できます。

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

開発に使うポート番号やタイムゾーンの設定をしていきます。

envファイルにて
6行目にAPP＿PORT=8573と書く（数字はなんでも良い）

config->app
timezone = "Asia/Tokyo"
locale="ja"

database->migrationファイル全て削除

Laravelを動作させるためのコンテナを立ち上げていきます。

./vendor/bin/sail up -d

Viewに記述

resources->viewにて'index.blade.php'を記述していく。

CSS

public->cssフォルダ作成

Web.phpに記述

配列を->with('themes' => $theme)で受け渡す。

index.blade.phpで利用する

投稿がない場合の記述法

Web.phpは「Route」に専念。操作はControllerに移行

コマンドにて、コントローラーファイルを生成する。

docker上にあるphpを操作するので、vender/binを利用
./vender/bin/sail artisan make:controller ThemeController

//配列の中に['クラス名','メソッド名']
Route::get('/', ['App\Http\Controllers\ThemeController','index']);

// ::classは文字列で取得できるので、クオーテーション消す
Route::get('/', [App\Http\Controllers\ThemeController::class,'index']);

//useで名前空間指定することで、Pathを短くする
use App\Http\Controllers\ThemeController;
Route::get('/', [ThemeController::class,'index']);

投稿の一覧ページから詳細ページに飛べるようにリンクを設定

index.blade.phpにて、配列のインデックスを取得する方法

ルーティングでURLにパラメーターを渡す方法

Web.phpにて、テーマ一覧をクリックした際のルートを示したい。

パラメーターとしてidを渡す
Route::get('/themes/{id}', [ThemeController::class,'show']);

ThemeController.phpにて、メソッドを記述していく

$themes = [
        '恋愛',
        'セクシュアル',
        '同棲',
        'デート'
    ];
が、index()メソッドの中に入っているので、これをshowメソッドでは使えない。
そのために、配列を外へ出して　private $themes =[];に変換
 private $themes = [
        '恋愛',
        'セクシュアル',
        '同棲',
        'デート'
    ];
    public function index() {
    return view('index')->with(['themes' => $this->themes]);
}

public function show($id){
    return view('show')
        ->with(['theme' => $this->themes[$id]]);

投稿の詳細ページを作成し、値を埋め込んでいきます。

viewフォルダ内に、themesというフォルダを作り、その中にshow.blade.phpを作成する。
この理由は、管理しやすくするためである。

show.blade.phpには、indexのものをコピペすれば良い。
あとは、好きに編集する。
例えば

<h1>{{ $theme }}</h1>
こうすれば、開いたテーマを表示してくれる。

また、ThemeControllerのview('show')が
themesフォルダを作ったことにより、一個下の階層に入ったため
'themes.show'に変更する必要がある。

CSSが正しく読み込めるようにコードを修正していきます。

view>themes>showの階層になってしまったため
localhost/themes/css/style.cssに指定されてしまう。
そのため、構造が変化してもCSSが開けるようにしていく。

href="{{ url('css/style.css') }}"
とすれば、Public内にあるCSSが利用できる。

BackLINKの作成

これで指定すれば、<<Backを作成でき、ホーム画面に戻る。

ルーティングに名前をつけて、変更に強いコードに

Route::get('/', [ThemeController::class,'index']);

Route::get('/themes/{id}', [ThemeController::class,'show']);

このままでは、URLの構造が変わると、全てアクセスできなくなってしまう

なので、変更に強い形式に変えていく。（ルートに名前をつける）

Route::get('/', [ThemeController::class,'index'])
    ->name('themes.index');

Route::get('/themes/{id}', [ThemeController::class,'show'])
    ->name('themes.show');

&laquo; <a href="{{ route('themes.index')}}">Back</a>

各PHPのリンク先も変更しておきましょう。
ちなみに、indexのようなパラメーターがある場合は

<a class='link' href="{{ route('themes.show', $index)}}">

こうすれば、OKです！

コンポーネントを使って共通部分を省こう

view>componentsでフォルダを作成する。
その中に、共通部分を入れるファイルを作成（common.blade.phpなど）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App</title>
    <link rel="stylesheet" href="{{ url('css/style.css') }}">
</head>
<body>
    <div class="container">
        {{ $slot }}
    </div>
</body>
</html>

{{ $slot }}を書いた場所に、各自のコードが挿入される。

それぞれ、index,show.phpには
<x - common></x - common>を挿入して、コンポーネントと連携させる。

$slot以外の値を埋め込む方法

まず、common.phpに
<title>{{ $title }}</title>
と、変数を代入する。

<x-slot name='title'>
    M&W no Real
 </x-slot>

でタイトル変数に、指定値が挿入される。

続きは

この記事が気に入ったらサポートをしてみませんか？

Laravel開発手順 基本機能編 Docker利用