コンテンツにスキップ

5 ユーザ別ページ(演習)

そのユーザのみの画像を表示した一覧ページを作成します。

5.1 リンク

投稿一覧(index.html)のユーザ名を /user/ユーザID へリンクします。

5.2 app.py

以下の関数を作成します。

  • URL:/user/
  • 関数名:user(uid)

Userテーブルからuidのユーザを検索し、user.htmlにuserという名前で渡します。

※ヒント:関数 toukou参照

5.3 user.html

まず、h1タグで 「(ユーザ名)の写真」 と表示します。

次にfor文でそのユーザの画像を表示します(index.html参照)。ただし、ユーザ名は全て同じなので表示しません。

なお、そのユーザの投稿リストは rows に入っているわけではありません。user.toukou で取得出来ます。

5.4 style.css

ユーザ名のリンク(.uname a)の色を黒にします。 また、リンクを設定すると下線が設定されるのでこれを消去します。

また、マウスを上に持って行くと下線を引くようにします。

ヒント1:text-decorationプロパティをunderlineにすると下線が引かれます。noneにすると何も引かれません。

ヒント2:セレクタのタグの後ろに :hover を付けることでマウスが上に来たときのスタイルになります。