ゆにはじ 33日目　SOUL’d OUTのシングル一覧（データベース接続と項目の並べ替え）

2024年8月17日2024年11月11日

こんにちは栞です。
フェチの表現手段としてunity触ってます。

今回だされた課題は
LAMP環境で並び替えのできるランキングページを作ること。

前回の立太子ボタンとおおきく違う点は
データベースに接続せよとのこと。

身構えていましたがClaudeのおかげで
すぐ終わりました。
AIに感謝…。

せっかくなので私の好きなSOUL’d OUTをお題に作りました。

新たに出てきた知識を
ここに置いときます。
間違っていたりしたら
指摘してもらえると嬉しいです。

データベースの基礎

こういう階層構造になっている

データベース(行列の集合)
└── テーブル (行列)
    ├── レコード (行)
    └── カラム (列)

レコードが各個体を、カラムが属性をあらわす。
レコード：ポケモンの名前
カラム：タイプや種族値
みたいなイメージ

訂正

カラムは属性で
レコードは「カラムの値の集合」の
「1行のデータ」。

カラム：
名前|タイプ|種族値
レコード：
ガブリアス|龍地|108-130-95-80-85-102

みたいな理解が正しい。

操作手順

前提：
phpMyAdminでテーブルを作成している

任意のディレクトリでプロジェクト作成
データベースへの接続 → 表示を確認
プロジェクトフォルダにてMVC作成 → 表示を確認
View(index.ctp)を編集
Controllerを編集

データベースを使うのに
Modelを一切いじらなくていいのがポイント。
ポイントというか意外だった

2. データベースへの接続

プロジェクトを作って、
ブラウザで確認するとデータベースの欄が
赤ミトンになっている。

これはつながってない証拠。
CakePHP特有なんでしょうけど
いちいちかわいくていいですね。

さてつなげるには

C:¥xampp¥htdocs¥messageboardssystem¥config¥app.php

を開いて
Ctrl + G で260あたりの数を打ち込んで
ここにたどり着き、

username
password
database
encoding
timezone

を以上のようにすればつながる。

databaseはつなげたいデータベース名。
encodingはコメントアウトしてあるのを
外すだけ。

つながりました。

3. プロジェクトフォルダにてMVC作成

プロジェクトフォルダが
カレントディレクトリになっていることを確認して

php bin/cake.php bake all souldout

最後の単語は分かりやすければなんでもOK

ブラウザではこう。
すでにいいカンジ。

復習

URLの構成は
http://localhost/プロジェクト名/Controller名/アクション名

cf. php bin/cake.php bake all souldout

4. View(index.ctp)を編集

さきほど確認したとおり、
表はすでに完成している。

なので書き加えるのは
ボタンを生成するコードだけ。

5つボタンがあるがガワが違うだけなので
リリース日を新しい順にするボタンだけ載せます

    <!-- 並び替えボタンを追加 -->
    <div class="sorting-buttons">
        
        <?= $this->Html->link(__('Release Date sort (New to Old)'), ['action' => 'index', '?' => ['sort' => 'release_date', 'direction' => 'desc']], ['class' => 'button']) ?>

    </div>

これがなにをやっているかというと…

ボタン状のリンクを生成する
リンクのURLを作成する↓http://localhost/SO_Ranking/souldout?sort=release_date&direction=desc
押されたらControllerのindexアクションを呼び出す
アクションで用いるクエリパラメータ(sortとdirection)を送信

以上を順に実行するコード。
くわしくは↓

5. Controllerを編集

    public function index()
    {

        $this->paginate = [
            'order' => [
                $this->request->getQuery('sort') => $this->request->getQuery('direction')
            ]
        ];

        $souldout = $this->paginate($this->Souldout);

        $this->set(compact('souldout'));
    }

これはなにをやっているかというと…
ここは多分板書を見た方が早いかな