さわぴかのなんでもノート!

学びのアウトプット!なにについて書くかはわかりません!なんでもノートです!

【今日学んだこと】未経験からエンジニアで転職「7週間目その4」

木曜日!

どこかにJSをいれたい心

今日やったこと

  • skype朝礼、終礼with Mさん
  • 同世代祭りシステムのを進める、機能ついか スキルシート
  • Spring入門の本
  • bootstrapの勉強、見た目

できなかったこと

明日やること

今週やること

来週やること

  • 勉強しつつ同世代祭りシステムのを進める
  • 表側も出来るだけかく
  • 細かいところ追加したりする

めも

同世代祭りシステムのを進める

今日の流れ

・ヘッダー、フッターを作る

・bootstrapの勉強しつつ、見た目を綺麗にしていく

・カラーパレットみる、青、緑系で、何パターンか作ろう

・機能も少しできるところから追加する


Javaのこと

  • 管理画面にキーワード検索を追加
  • 案件を表示する一般公開側にもキーワード検索を追加する
  • 「案件リスト」にて案件作成時、選択してコピーできるようにする
  • 管理画面の方のURL、adminを入れて変える
  • ページネーション作る、20件ずつとか

追加できたらしたいこと

  • 何で検索したのかと、該当件数も出したいな
  • 問い合わせフォームの送信がミスった時のエラー
  • これコピーするボタン押した後にポップアップとか出すのにJavaScript使おうかな?
  • 外部キー設定
  • マイグレーションの見直し(なんかおかしくなってたところとか、外部キー設定とか)
  • セキュリティ的なのを見直すCSRFとか
  • インデントの整理
  • スネークケース、キャメルケースぐちゃぐちゃなところもあるので治す
  • エラーページを作る
  • 選択したプルダウンを検索語の画面でも保持しておきたい気持ち
  • 【応募はいません。のif文】
  • 上に戻るぽたんとかもつけたらjavascriptもかけていいかな

改行ができない

あと気づいた、updatedatが動いてない

Thymeleafを使用した入力フォームのサンプルコード - Qiita

入力フォーム側は改行された、表示だなぁ

f:id:pikahika:20200319153453p:plain

Textareaで保存したテキストの改行を表示させる方法(\n \r とは?)

だめ

th:utext=

も動かない

Thymeleafで改行コードをhtmlの改行タグに変換して出力する - Qiita

これかなk

f:id:pikahika:20200319155809p:plain
改行はされたけど崩れた

f:id:pikahika:20200319160245p:plain
div の場所変えたらいけたー

よし、どっち側も修正しよう


テンプレートのレイアウト化する

フラグメントって機能らしい

Thymeleafでth:include, th:replace, th:insert, th:fragmentの組み合わせ別使用法 - Qiita

Tutorial: Using Thymeleaf (ja)

お。できたできた

これでフッターへっだー変えたい時もう全部のところ行って帰る必要がなくなった、便利

HTML/CSS、bootstrap、デザインのこと

検索ボタンを横にしたいな

f:id:pikahika:20200319101950p:plain
横並びにした

色味

f:id:pikahika:20200319105813p:plain
このあたりかなぁ?https://saruwakakun.com/design/gallery/paletteより

Bootstrapのナビゲーションバー(navbar)の背景色を好きな色にする方法とは? - Qiita

f:id:pikahika:20200319110542p:plain

色変わらないーーー

.text-body が邪魔してた

Gradient Generator - Colordesigner

このツールも面白い

f:id:pikahika:20200319113930p:plain
うーん

・ヘッダー、フッターを作る

f:id:pikahika:20200319170424p:plain

タグをオレンジにしてみた

f:id:pikahika:20200319170655p:plain
圧迫感がすごいw

f:id:pikahika:20200319170819p:plain
まだこっちの方が優しい

f:id:pikahika:20200319170959p:plain
灰色はそれはそれでいい気がしてしまっている、見慣れてるだけか

bootstrapのボタンをカスタマイズする方法 - Qiita

Bootstrap 4 のボタンのサイズ、色をカスタマイズする方法 | ぺらラボ

ボタンの色も変えようとしたけど

f:id:pikahika:20200319172805p:plain
なんか枠線?が消えない

来週Eさんにきこ

・全体の色感どうするか ・ボタンの枠が変わらない ・一覧画面、何文字まで出す、みたいな制限

配色パターン見本40選:ベストな色の組み合わせ確認ツール

このサイトの「元気ーパターンの3つ目」