質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

受付中

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

yuic.sk12345
yuic.sk12345

総合スコア1

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0グッド

0クリップ

455閲覧

投稿2022/10/12 00:56

編集2022/10/12 01:01

前提

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

実現したいこと

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

※次の段階では、mysqlに選択した部分が、その月に何個あるか、集計をしたいです。
※このカレンダーは、100人ほど、各ログイン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); // 前月・次月の年月を取得 // 方法1: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))); // 方法2:strtotimeを使う // $prev = date('Y-m', strtotime('-1 month', $timestamp)); // $next = date('Y-m', strtotime('+1 month', $timestamp)); // 該当月の日数を取得 $day_count = date('t', $timestamp); // 1日が何曜日か 0:日 1:月 2:火 ... 6:土 // 方法1:mktimeを使う $youbi = date('w', mktime(0, 0, 0, date('m', $timestamp), 1, date('Y', $timestamp))); // 方法2 // $youbi = date('w', $timestamp); // カレンダー作成の準備 $weeks = []; $week = ''; // 第1週目:空のセルを追加 // 例)1日が火曜日だった場合、日・月曜日の2つ分の空セルを追加する $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/ツールのバージョンなど)

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

1

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

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

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

投稿2022/10/12 01:41

yambejp

総合スコア109143

AbeTakashi👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yuic.sk12345

2022/10/12 02:41

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

2022/10/12 02:47 編集

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

1

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

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

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

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

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

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

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

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

投稿2022/10/12 01:36

編集2022/10/12 01:37
m.ts10806

総合スコア80040

AbeTakashi👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。