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

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

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

やっとだよ。

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

 

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

やりたかった事は、、、

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

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

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

 

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

 

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

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

 

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

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

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

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

　２・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第二弾は折り返しって感じです。

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

 

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

 

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

 

 

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

 

7月21日　vertical-align

カレンダー機能を追加したくて、とりあえず形だけ。

 

日付がどうしても左上に来なくて、調べたらvertical-alignを指定すればOK。

 

学習が出来た日に、何かアイコンでも表示できるようにしよう。

アイコンのカラーを背景色と同じにして、phpで勉強したかどうかのフラグを立てて、フラグが立ったら色つける。。。みたいな。。。

 

いや、、、フラグって言葉を使いたかっただけじゃないからね！！！

使い方合ってるか心配だけども。

 

日付とかもforeachで回して作るんだろうなぁ。本当は。

それは明日に。

 

では。

 

7月18日の学習記録　朝活成功＆初コード公開

今朝からいきなり思いついて、頑張ってみた。初の朝活成功。

でね、色々やったんですよ。昨日も書きましたが、GROUP BYとか使ってさ。

でも、もっと簡単にできたんです。なぜこれに気が付かなかったのか。

さらに、実は上のツイートではあるエラーが発生していました。

前提として、まだ1つも学習記録を登録していない状態。

この状態の時に、漢字ドリルではなく、計算ドリルだけを入力した時に、漢字ドリルのところに時間が表示されてしまうというエラーでした。

希望としては

漢字ドリル　00時間00分

計算ドリル　00時間40分

みたいになって欲しいんです。

ただ、この後漢字ドリルを入力すると、ちゃんと思い通りの表示になるのよ。

これを解消するために色々考えてたんだけど、すげー難しく考えすぎてました。

ついでに、学習記録ページには、当日の学習時間だけ表示するように変更しました。

function studyCaseToday($u_id, $case){
debug('今日のドリル毎の学習時間を取得します。');
try {
$dbh = dbConnect();
$sql = 'SELECT sum(s_time) FROM studyrecord WHERE user_id = :u_id AND
study_date = CURDATE() AND s_case = :s_case';
$data = array(':u_id' => $u_id, ':s_case' => $case);
$stmt = queryPost($dbh,$sql,$data);
if ($stmt) {
return $stmt->fetch(PDO::FETCH_ASSOC);
}else{
return false;
}
} catch (Exception $e) {
error_log('エラー発生'.$e->getMessage());
}
}

DBに、何の学習をしたかまで保存してるんだから、それ使えと。。。

って事でこれにて無事に当日のみの学習時間を表示する事に成功。

study_date = CURDATE()

今回はこれをググって使いました。当日を指定するにはCURDATE()を使うんです。

このコードを基本に、

・当日の学習時間の合計

・今までの学習時間の合計

・今までのドリル毎の学習時間の合計

これらを表示させることに成功しました。

もちろん、アカウント毎に表示されますよ！！！

 

それから、fetchについても色々調べてみた。完全には理解してないけども。

これはまた後々。

 

長かったけど、考えてる時間は楽しかった。

 

さて、明日からはいよいよカレンダー。ここが難所っぽい。

みなさんはカレンダー機能、どうしてるんだろう。。。

 

 

7月17日の学習記録　GROUP BY

勉強した時間を合計して表示する方法はできたけど、漢字ドリル、計算ドリル毎の時間も表示したくて。

 

で、タイトルにもある通り、GROUP BYを使って表示に成功。

 

少しづつ進んでます。

明日も頑張ります。

 

7月15日の学習記録　色々大変。。。

昨日の続き。

 

どうしてもDBに保存することばかり考えてたんです。

でも、今朝気づいたんです。

そう。保存なんてしなくていいんですよ。

保存するのは日々のデータだけでいいんです。

その保存したデータを合計して、表示してやれば良いんです！！

 

ってことで、早速sum関数を使って、合算してみよう！

SELECT SUM(カラム名) FROM レコード名 WHERE 条件

とやると、合算した数値が返ってきました！

で、配列で返ってきてるので、logを確認すると、

[SUM(カラム名)] => 合算した数値

となってました。

 

問題はここから。

例えば、40分勉強したぞと登録したい場合、40と入力してPOST送信します。

すると、DBではTIME型を指定してるので、00:00:00の形で保存されますが、、、

このままだと00:00:40となってしまい、40秒しか勉強してない事に。

悩んだ結果、入力した数値に*100をするという暴挙。

でも、そうすると00:40:00と見た目的には40分やった感じで保存されるんですよ。

ただね、数学的に、40*100=40分っておかしいでしょwww

でね、一旦秒にしてしまえと、、、そうすれば、int型で保存して、それを時間表示にしてしまえばいいのさ！！！

って思いついて、とりあえず秒で保存するために、*100という謎の式を*60に直して、40分と入力した場合は、2400秒で保存されるようにしました。

 

次に、その秒を時間に変更する方法ですが、こちらの記事を参考にしました。

qiita.com

 

ここに秒を時間に変更する方法も書いてありました。

本当に感謝しかない。

で、ここの関数を利用させていただいて、やっとできましたよ。

長かった。今までで一番長かった。。。

 

でも、この達成感がやばいね。この中毒になりたいね。

 

とりあえず。。。寝ますわ。。。

明日はバイトだが、少しでも触ります。

みなさん、睡眠は大切です。

7月14日の学習記録　DBの構築と値の保存方法

学習記録を取るためのサービスなので、何月何日に何分勉強したかを記録したい。

 

日付はdate関数使うとして、問題は勉強時間。

DBの型はtime型にしました。

で、その日のデータを保存するまでは良い。

問題は、累計のデータを保存する方法がわからない。

 

初回の登録以降は、常にデータが累積されていく仕組みでないとだめ。

かつ、当日のデータもそれはそれで残しておく。

 

これがムズイ。。。

入力された値を加算してDBに保存していくんだけど、そのやり方がさっぱり。

20時半から初めて、この時間（0時02分）までやってわからなかったので、今日はここまで。

どなたかヒントいただけませんか・・・

 

って、ここを覗いていただけてる方なんているのでしょうか。

ツイートもしてみるか。。。

 

7月13日の学習記録　画像のpost送信

ライブプレビュー機能はまだ実装してません。

とりあえず画像の登録をできるようにした。

 

画像のパスを指定する関数を作るのが大変。全然覚えてないし覚えられない。

今回もここは写経になってしまった。

そもそも$_FILESがむずい。

調べると、元々PHPにある変数。

使用するにはinputのtype属性の値をfileにする必要がある。そもそもformタグのmethod属性の値をpostにしないとだめ。

$_FILESには、アップロードされたファイルの
$_FILES['inputで指定したname']['name']：ファイル名
$_FILES['inputで指定したname']['type']：ファイルのMIMEタイプ
$_FILES['inputで指定したname']['tmp_name']：一時保存ファイル名
$_FILES['inputで指定したname']['error']：アップロード時のエラーコード
$_FILES['inputで指定したname']['size']：ファイルサイズ（バイト単位）
の5種類のデータが格納される。

これがわからず、サンプルコードの中にいきなり
$_FILES['pic']['error']
とか出てこられて、テンパる。。。

でも、連想配列だってことは、なんとなく覚えてたからよし。

またわからなくなったら調べればいい。

 

他にも、学習記録を入力するページの大元も完成。

明日は実際に処理を書いていく。