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

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

6月15日の学習記録

CSSもそうだけど、やらないと難しいよ・・・

 

今日はinputタグを中央寄せにする方法に四苦八苦。

インライン要素だから、text-alignを使えばすぐなのに。。。

 

あとはlabelタグを使って、フォームをまとめるのもやった。

今回は色合いはパステル中心に。デザイン的にも満足してます。

ほぼ変わってませんが。。。

 

枠線を無くして、でも境界線を出せるようなデザインにしていこうと思います。

 

19時から22時

6月14日の学習記録

バイト前に30分だけ。

 

floatを使った要素はふわふわと浮くから、それをまとめてる親要素にoverflow: hidden;を指定しないと、親要素の高さが出ない。

これ、何回もやってるけど覚えないからメモ。

 

そして、、、

widthは、ウィドゥス

heightは、ハイト

だそうです。。。

 

ワイドスにヘイトと読んでました。

。。。

。。。

。。。

 

18時50分から19時20分

6月12日の学習記録

初のアウトプットをTwitterで披露し、色んな方々からコメントを頂きました。

ありがとうございました。

 

で、その中で、今回のはフルスクラッチで作ったわけですが、当の本人、それを理解しておらず、顧問に突っ込まれてしまいました。

 

顧問、すいませんでした。

この程度をスクラッチで作ったとは言えないと思っておりました。

 

さて、本日から2個目のアウトプット。

ほぼ見ずにやってやろうかと思ってますが、かなり時間かかりそう。

まず恒例(?)のCSSでつまずく。。。

ヘッダーメニューを作る時、必ずやる、、、。

タイトルをh1で作って、ulでメニューを作る。

タイトルは左寄せ。メニューは右寄せ。

 

これが上手くいかない!!

で、結局、h1にdisplay: block;とposition: absolute;を入れたらできた。

入れないと、h1の要素が横幅いっぱいになってしまって、メニューを横並びにできなかった。

 

次の問題はulタグに謎のmarginが・・・

よくみたらliタグにfloat使ってた。だから、ulタグにoverflow: hidden;いれないとダメなのに気づけた。

その後、marginが無事に上下に割り振られたので、0にして消した。

そしてようやく、その親要素にline-heightを設定して、中央にした。

 

あとは、最初から切り出せるものは切り出しておく。ヘッダーとか。

 

サンプルを見ずにやるのは難しいけど、これが一番力つくのが良くわかる。

そして、何がわからなくて、どうしたらできるようになったのかをこうしてメモするのも良い。絶対忘れる。それを今まさに実感してる。

 

今日はここまで。

結局ヘッダー部分しかできんかった。。。

 

21時から23時

6月10日の学習記録

今日は2月頃から始めたアウトプットが漸く一区切りした感じ。

細かな部分は後にして、とりあえずは完成。

ページの遷移の部分で、マイページの要素の中に、お気に入り一覧があるんだけど、その商品をクリックした時に、商品詳細ではなく商品編集画面へ遷移してしまうのを確認。そして、自分が登録したものではないやつだと、マイページへ戻ってしまう。

こりゃまずいと思い、コードを編集。

ここに表示するのは、お気に入りに登録した商品全部。

で、遷移するのを分岐させるのにif文を使った。

$_SESSION['user_id']とお気に入り登録した商品のデータ内にある登録したユーザーIDが一致していれば、商品編集画面へ。そうでない(=自分が登録したものではない商品)場合は、商品詳細画面へ。

今日もサンプルを見ずに書けました。よくやった。自分。

 

商品登録ページもなぜかエラーが出てて。ログを調べたらPHPの構文にエラーがあるらしいとのこと。。。

探したら、アウトプットの途中で商品の登録内容に金額を追加したのに、中途半端にSQLに反映させてました。INSERTのVALUEの中に金額の項目を追加してなかったがために、エラーになってました。

今思えば、こんなエラーが出ても、???だったのに。。。

成長を実感しました。

 

こんなスピードでは、今年中の卒業は厳しいかもしれませんが、亀でもいい。辿り着けば。の精神で明日からも頑張る。

 

次の部へ行く前に、もう一個アウトプット予定。

ネタは、子供たちの宿題管理ソフト。

なんか漢字ドリルと計算ドリルがあるらしく、必ず2回やらんといけないらしい。

うまくチェックできるようなの作りたいけど、、、。

 

19時半から21時

 

6月6日の学習記録

今日はお気に入り登録した商品をマイページに表示するやつを作った。

 

・DBの連結をした。その際、つなげる元のDBの情報(今回はお気に入り情報と、商品情報)の必要な情報のみ取得したい。

外部結合(LEFTとRIGHT JOIN)だと、必要ない情報まで取得してしまうのでダメ。

内部結合(INNER JOI)だと、両方の必要な情報のみ取得できる。

 

・最初、プロダクトテーブルとライクテーブルを結合。プロダクトテーブルのカラムが順番に表示され、最後にライクテーブルの頭から結合された。ただし、両方のテーブルにある同名のカラムに関しては、ダブって表示されることはなかった。

試しに、、、

’SELECT * FROM product AS p INNER JOIN `like`  AS l WHERE p.user_id = :u_id AND delete_flg = 0’;

これと

’SELECT * FROM `like` AS l INNER JOIN product  AS p WHERE l.user_id = :u_id AND delete_flg = 0’;

これを試した結果、取得したレコードの順番は違えど、同じレコードを取得したし、画面の表示も同じだった。

 

ただ、お気に入りしているかいないか、の情報がメインだと思うので、後者のSQL文を使った。

 

また、お気に入り登録した数のみを取得して、それを表示させる機能も追加した。

SELECT文のcount(*)を使って作ったけど、数のみを取得する方法がわからなかった。ググって調べると、fetchColumn();というのを使えば、取得したレコード数を表示できるとのことだったので、クエリ結果を$resultに代入して表示させたら、無事に成功。

 

ただ、ふと思い返し、レコード数を表示させるやつ何かやったような。。。

で、思い出したのがrowCount();

 

先のSELECT文は、

SELECT count(*) FROM `like` WHERE user_id = :u_id ~以下省略

クエリを実行した後、

$result = $stmt->fetchColumn();

でOKだった。

rowCount();を使う場合、この文でレコード数をカウントするので、

先のcount(*)部分を、*に変更した。

SELECT * FROM `like` WHERE user_id = :u_id ~以下省略

こうすることによって、期待通りの表示になった。

 

色々実験することで身につくものだと、ここ数日実感してる。

この調子でOP進めていこう。

 

19時から21時

ブログ20分くらい。。。

コード書きながら、忘れないようにメモするように書いてたため、時間はおおよそ。

 

webukatu.com

 

6月4日の学習記録

今日は夜中までバイトなので、今のうちに昨日の続き。

 

検索した結果を表示する。

foreachを使った。これはもう忘れない。。。はず。。。

 

で、ちゃんと表示できたわー。。。

めっちゃ嬉しい。

まだ、検索の入力欄のバリデーションとかはしてないから完璧ではないけども。。

今の自分の知識だとこれが限界。

AND検索とかORとか作ってみたいけど、それはまた今度。

 

いやー。充実。これこそプログラミングの醍醐味よ。

 

この勢いで。。。どうしようかな。。。もう一個アウトプットした方が良さそうな気がするので、日記的なものでも作ろうかしら。

検索機能の様子はTwitterで。

 

 

17時から17時半。

ブログは数分。

6月3日の学習記録

今日は自力で検索ボックスを作ってみた。

バチクソむずい。

 

考えたフローとしては、

1・検索窓の中のテキストを変数に代入する。

2・DBに接続し、SELECT文を使って、料理が登録されているテーブル内のnameのカラムを文字列検索する。

3・返ってきた値を表示する。

 

何だけど、まず文字列を検索できるんか?の壁がやってきた。

ググったら、LIKEを使うんだと。。。ふむ。

で、使い方見ると、

SELECT * FROM [テーブル名] WHERE [カラム名] LIKE [検索する文字列] ;

って感じだった。

 

検索する文字列には、POSTを使って送信するので、

$textbox = $_POST[search];

的な感じで代入。(formタグのname属性の値がsearch)

ここまでは良かった。

 

なんとかオリジナルの関数作ってやったんだが、レコードが1件しか返ってこん!!

 

絶対どっかでやってるはず。。。思い出せー。。。

 

ってやってて、過去のやつ振り返ってたら、、、

$stmt->fetch(PDO::FETCH_ASSOC);

こうなってるのを発見。

すぐさまfetchAll();に変更して、検索結果の全レコードを取得完了。

 

とりあえず今日はここまで。

今日の教訓

fetchAll();は偉大。

 

19時半から20時、21時から23時まで。

ブログは15分。