HTML,php,mysqlで、予約カレンダーを作成したい

前提

ここに質問の内容を詳しく書いてください。
HTML,php,mysqlで、予約カレンダーを作成しています。
HTML,phpでカレンダーを作成までできました。

実現したいこと

上記のカレンダーで作成したカレンダーにアクセスしたら、クリックやタッチにより、「選択（背景色の変化でもいいですし、●マークが表示されてもよいです）」、や「選択してものを解除（背景色を元に戻す）」、といった機能を追加したいです。

※次の段階では、mysqlに選択した部分が、その月に何個あるか、集計をしたいです。
※このカレンダーは、１００人ほど、各ログインIDでアクセスして、各個人がそれぞれの予定に従って「選択」「選択の解除」できるようにしたいです。

ここに実現したいことを箇条書きで書いてください。

▲▲機能を動作するようにする

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<?php
// タイムゾーンを設定 calen_01
date_default_timezone_set('Asia/Tokyo');

// 前月・次月リンクが押された場合は、GETパラメーターから年月を取得
if (isset($_GET['ym'])) {
    $ym = $_GET['ym'];
} else {
    // 今月の年月を表示
    $ym = date('Y-m');
}

// タイムスタンプを作成し、フォーマットをチェックする
$timestamp = strtotime($ym . '-01');
if ($timestamp === false) {
    $ym = date('Y-m');
    $timestamp = strtotime($ym . '-01');
}


// 今日の日付 フォーマット　例）2021-06-3
$today = date('Y-m-j');

// カレンダーのタイトルを作成　例）2021年6月
$html_title = date('Y年n月', $timestamp);

// 前月・次月の年月を取得
// 方法１：mktimeを使う mktime(hour,minute,second,month,day,year)
$prev = date('Y-m', mktime(0, 0, 0, date('m', $timestamp)-1, 1, date('Y', $timestamp)));
$next = date('Y-m', mktime(0, 0, 0, date('m', $timestamp)+1, 1, date('Y', $timestamp)));

// 方法２：strtotimeを使う
// $prev = date('Y-m', strtotime('-1 month', $timestamp));
// $next = date('Y-m', strtotime('+1 month', $timestamp));

// 該当月の日数を取得
$day_count = date('t', $timestamp);

// １日が何曜日か　0:日 1:月 2:火 ... 6:土
// 方法１：mktimeを使う
$youbi = date('w', mktime(0, 0, 0, date('m', $timestamp), 1, date('Y', $timestamp)));
// 方法２
// $youbi = date('w', $timestamp);


// カレンダー作成の準備
$weeks = [];
$week = '';

// 第１週目：空のセルを追加
// 例）１日が火曜日だった場合、日・月曜日の２つ分の空セルを追加する
$week .= str_repeat('<td></td>', $youbi);

for ( $day = 1; $day <= $day_count; $day++, $youbi++) {

    // 2021-06-3
    $date = $ym . '-' . $day;

    if ($today == $date) {
        // 今日の日付の場合は、class="today"をつける
        $week .= '<td class="today">' . $day;
    } else {
        $week .= '<td>' . $day;
    }
    $week .= '</td>';

    // 週終わり、または、月終わりの場合
    if ($youbi % 7 == 6 || $day == $day_count) {

        if ($day == $day_count) {
            // 月の最終日の場合、空セルを追加
            // 例）最終日が水曜日の場合、木・金・土曜日の空セルを追加
            $week .= str_repeat('<td></td>', 6 - $youbi % 7);
        }

        // weeks配列にtrと$weekを追加する
        $weeks[] = '<tr>' . $week . '</tr>';

        // weekをリセット
        $week = '';
    }
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>PHPカレンダー</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap" rel="stylesheet">
    <style>
        .container {
            font-family: 'Noto Sans JP', sans-serif;
            margin-top: 20px;
        }
        a{
            text-decoration: none;
        }
        th{
            height: 25px;
            text-align: center;
                    }
        td{
            height: 10px;
            font-size: 50px;
            font-weight: bold;
        }
        .today{
            background: orange !important;
        }
        th:nth-of-type(1), td:nth-of-type(1){
            color: #ff1493;
        }
        th:nth-of-type(7), td:nth-of-type(7){
            color: blue
        }
        
        h3 {
        font-size : 50px;
        text-align: center;
        background: #FFCC99;
        padding: 0.25em 0.5em;
        }
        h3:before {
    content: url(../sanikai_logo.png);
}
        
</style>
</head>
<body>
    <div class="container">
        <h3 class="mb-5"><a href="?ym=<?php echo $prev; ?>">&lt;</a> <?php echo $html_title; ?> <a href="?ym=<?php echo $next; ?>">&gt;</a></h3>
        <table class="table table-bordered">
            <tr>
                <th>日</th>
                <th>月</th>
                <th>火</th>
                <th>水</th>
                <th>木</th>
                <th>金</th>
                <th>土</th>
            </tr>
            <?php
                foreach ($weeks as $week) {
                    echo $week;
                }
                ?>
        </table>
    </div>
</body>
</html>

イメージ説明

HTML、PHP

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

2022/10/12 01:27

こちらの質問が複数のユーザーから「調査したこと・試したことが記載されていない質問」という指摘を受けました。

yambejp

2022/10/12 01:00

マークダウン方法がおかしいようですソースがきれいに見えるよう調整ください

m.ts10806

2022/10/12 01:02

やりたいことに対して現状どこまでできているのか（調べたこと試したこと）記載してください。現状だと「あとはやってくれ」のような作業依頼にも見受けられます。

AbeTakashi

2022/10/12 01:19

「なにをしたいのか？」という情報もたしかに重要ですが、それよりも「何が分からないのか？」をピンポイントに書いた方がいいです。回答する方もこの質問の状態だと何を答えて良いのかが分かりません。

yuic.sk12345

2022/10/12 01:27

AbeTakashiさまご指摘、ありがとうございます！「何が分からないのか？」についてですが、 ①一番気になることは、「HTMLで作成したテーブルのセルを、クリックやタッチにより、「選択」や「選択したものを元に戻す」といいたこと自体ができるのか、できないのか？」という、そもそもの点をご教示いただきたいです。 ②①の点が問題なくできるようであれば、どのような仕組みにして関数を使用すればよいか、といったヒントをご教示いただければと思い質問させていただきました。

m.ts10806

2022/10/12 01:41

質問本文に追記を。

行動規範の内容に同意します

回答2件

まずUIについてはjsで実装してください

ロード時にサーバーから状態をうけとり表示を変更する
クリックしたもの（テーブルセル？）に対して状態を変更する
その状態を非同期でサーバーに送って追加・更新・削除する
更新後に、サーバー上の状態を返してもらう

データのやりとりはfetchがベター

投稿2022/10/12 01:41

yambejp

総合スコア113582

回答へのコメント

yuic.sk12345

2022/10/12 02:41

なるほど。。。 HTMLのテーブルから出発してしまったのが、悪手でしたね。。。苦労しして、HTMLのテーブルからカレンダー表示までできるようにしたのですが、「jsでuiを作り直す」ということは、一からすべて作り直しということですよね？

yambejp

2022/10/12 02:47 編集

> 一からすべて作り直しいえ、HTMLをベースにjsを組み込むだけなので、拡張すれば大丈夫です。ただしHTMLだけだと足りない情報をHTML要素に追加する必要はあるかもしれません

行動規範の内容に同意します

①一番気になることは、
「HTMLで作成したテーブルのセルを、クリックやタッチにより、「選択」や「選択したものを元に戻す」といい
たこと自体ができるのか、できないのか？」

できます。
というか、これに限らず、大抵のことはできます。
大抵のことは「そのように作ればできる」ので、可不可だけ聞くのはあまり発展性がありません。
※たまに「本当に可能かどうかだけを聞きたい」人もいるので野暮とまでは言いませんが

②①の点が問題なくできるようであれば、どのような仕組みにして関数を使用すればよいか、といったヒントをご教示いただければと思い質問させていただきました。

手法だけの話をすると沢山あります。
「選択」や「選択解除」をどのタイミングでしたいかにもよるでしょう。

選択同時にDBも同時に、なら、
・選択する場所自体にSUBMITの効果を持たせて送信してDB更新して再表示
が難易度としては低いです。
「選択した個所しか変わらないから全部読み込むのは」というのでしたら
・選択時にJavaScriptによって非同期通信（Ajaxなど）で更新し、JavaScriptで選択の切り替え（おそらくclassの付け外し）を行う
でしょうか。

「選択状態はリアルタイムではなく、更新ボタンを押したときに全部」なら
先の１つ目とやっていることは近いです。
・全体をformとして各選択状態を送信しDB更新、再表示。
もちろん、先の２つ目のような構成でもできます。

いずれも「データの更新」を切り離して作っておいた方が実装はしやすいでしょうね。

もう少し要件や操作、遷移、必要なデータなどを整理されたほうが実装はしやすいと思います。

投稿2022/10/12 01:36

編集2022/10/12 01:37

m.ts10806

総合スコア80699