商品陳列ページの続き

こんな感じで前回からの続きをつくりました。

サムネイル、タイトル、評価を追加しました。評価については後述します。
サムネイル、または詳細ボタンをクリックして詳細ページを表示します。

商品名、イメージ、説明、コメント一覧を表示しています。
コメントはこのような感じ。

ユーザー名、コメント、５段階評価を表示します。
既存のコメントの右、xはコメントの削除、eはコメントの修正ボタンです。

eをクリックすると編集可になり、

編集後もう一度eをクリックして確定です。

このままでは更新も削除もユーザーに関係なくすべてのコメントを変更できてしまうので、ユーザーごとの認証が必要です。

コメントの入力は最下段の入力欄を使います。
特に入力チェックをしていないので、こういう時こそValidationを使うべきですね。

コメント入力後。

一覧へは最上部の一覧表示タブをクリックします。このあたりのデザインは次回少し変えるかも。
コメントが追加されると、一覧で表示される評価を再計算します。
評価は、５段階評価の平均値です。

こんな感じです。
ちなみにシミュレーターでiPhone用に表示してみました。

崩れたりせずにきれいに表示されているようです。
次回は既にタブがあるけど、商品の新規登録、削除、変更を実装する予定です。

今日はこの辺で。

追記：
練習がてらGitHubに上げました。
https://github.com/matildatilda/sample-showcase