たかのしゅーのエンジニアへの道

ガチ初心者がウェブカツ受講すると、どうなるか。。。ってブログです。

7月28日の学習記録 カレンダー機能実装

やっとだよ。

やっと出来たよ。カレンダー。

 

一週間前に形だけ実装したカレンダー。

やりたかった事は、、、

 ・今日の学習記録を付けた時に、カレンダーに勉強した印をつける。

 ・もちろん、ユーザー毎に。

 ・ドリルの種類は問わない。(どちらか片方だけでも良し。)

 

これがしんどかった。。。

 

まず、カレンダーはググったら出てきたので、それを写経。

それから各変数の意味を理解して、どういった構成になってるのか確認。

 

次に、カレンダー自体を生成している関数を見たら、やはりfor文を使って繰返しの処理をして生成してた。

で、そこに勉強した印を付けたかったので、アイコンを入れ込みました。

最初に思いついた処理は、

 1・カレンダー全体にアイコンを配置。

 2・DBから勉強した日付を取得して、その日だけにclassを生成して、CSSで表示させるようにする。

 

最初、勉強した日付をdatetimeで保存してたんですが、このデータから日付の日にちだけを抽出し、for文で回している日にちを生成している変数とリンクさせようとしてました。

日付を2022-07-28 00:00:00みたいなフォーマットで保存してて、DATE_FORMAT()という関数を使って日にちのみを抽出しようと試みたのですが、うまくいかず。。。

使い方を学べたという点ではよかったのですが、、、。

 

じゃあ、そもそもちゃんとデータを2022-07-28として保存できるようにDBの構造を変えました。

それでも私の頭ではうまく日にちのみを抽出することができませんでした・・・いや、できたんですが、多次元配列になってて(fetchAll()を使いました。)、その日にちだけを取り出すのがすごく難しかった。

こんな感じです。

Array
(
[0] => Array
(
[study_date_d] => 27
)

[1] => Array
(
[study_date_d] => 27
)

)

この日にちだけを表示させようとすると、$変数名[0]['study_date_d']ってしないとダメなんですよ。

そして、[0]の部分って、学習データが増えるとその分増えるんです。

また、カレンダーを構成している中の日にちの変数と照らし合わせようとしても、学習データのデータ量分、照らし合わせないといけなくなるし、それだとデータ量によって[0]の部分を変えていかないといけない。

そこをfor文で回してあげれば!?とか思ったけど、うまくいかず。。。

いや、DBに保存してあるデータがY-m-dの形式じゃん。。。だったら分けちゃえ!ってことで、study_month(Y-m)とstudy_date(d)みたいな感じで分けました。ただ、そうするとデータ形がdatetimeだとうまく保存されないので、varcharに泣く泣く変更。このポイントだけが、今回の懸念点。

日時を保存しているはずなのに、保存先の形式がvarchar型ってのはどうなんだろうと・・・。でもこれしか思いつかなかったので。。。

[27-Jul-2022 22:38:56 Asia/Tokyo] デバッグ:学習した日付だけを取得
[27-Jul-2022 22:38:56 Asia/Tokyo] デバッグ:クエリ成功
[27-Jul-2022 22:38:56 Asia/Tokyo] デバッグ:取得したデータ27

なんとかこんな感じで日時だけを取得することに成功したんですが、今度はその日だけにアイコンタグを設置することが出来ず。。。

for文の中にphpでif文入れて、条件揃ったらechoでクラスつけるぜ!!って思ったら、文字列として<td>タグとかを生成してて、その中にphpはもちろん文字列として判断されてしまい、うまく表示できず・・・。

 

いや待てよ。

そもそもクラスつけて表示させるとかじゃなくて、その日だけにアイコンタグ使えるようにすればいいじゃん!

との考えに至りました。

 ・勉強したフラグが立ってればアイコン追加。

 ・なければ普通に<td>等でカレンダー生成。

となれば条件分岐や。if文や。

ってことで、if文で分岐させる条件が、、、

 ・生成する日にちと、勉強した日にちが同じだったら、アイコン追加。

よし!これでまずはダミーで勉強した日にちを照合させて、アイコンが表示されるかチェックや!!!

 

キタコレ

よし!!!!

あとはDBから称号や!!!!

 

ん?待てよ。。。

普通に(Y-m-d)のデータで照らし合わせれば、わざわざ(Y-m)と(d)に分けなくていいじゃん!!!

って思って、さっき作り替えたDBを再び元に戻す。それに伴い作った関数を元に戻す。。。

 

さて!照合しようぜ!!!

 

Array
(
[0] => Array
(
[study_date] => 2022-07-26
)

[1] => Array
(
[study_date] => 2022-07-27
)

)

 

あ・・・多次元配列だったわ・・・

 

ってなって絶望して、、、

 

・・・ん?さっきの(Y-m)と(d)でいいんじゃね?!これでいけんじゃね!?!?

 

そう。再びDBを編集。もちろん関数も変更。

 

そしてようやく。。。

 

長い戦いに終止符を打つことができた。。。

 

今回の最大の難所がカレンダー機能だと思ってたんです。

なぜなら、ここまで一度もサンプルでも実装がなかった機能なので。

ウェブカツブログにはちゃんと作り方が出てます。

webukatu.com

 

このブログを見てこなかったので、不安はありました。いや、不安しかなかったです。

 

でも、どこかで言われました。

「今まで実装したことのない機能を実装しないといけない。そんな事は日常茶飯事です。」と。

調べて、調べて、調べまくって。。。

最終的に使った方法の中に入ってこなかった事もたくさんありますが、色んな事を調べて、実際に機能するか試してみて。。。とても充実はしていたと感じました。

 

全てを覚えているわけではありません。ただ、DBからどうやって自分の希望するデータを参照すればいいか。ここに関しての経験値は上がったように感じます。死ぬほどアクセスしまくりましたから。

 

OP第二弾は折り返しって感じです。

次は掲示板機能。その後、親と子によって表示されるページを変えようと思ってるので、その辺りも実装して、ようやく完成。

 

先輩方はその先の部活へ進んでるので、焦りも多少ありますが、あくまで自分との戦いだと思ってます。ビジネスという観点では甘いかもしれませんが。。。

 

今後もがんばります。。。

 

 

いやぁ。。。よかった。。。