個人アプリ開発日記 #4

では前回書いた様々なメソッドが機能してくれるのか簡単なビューを使って確かめてみましょう、、！

### まずは新規登録から

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/fd891f93-62bf-d42b-cf29-42d13a6c841b.png" >

このような簡単なビューで新規登録

#### users/new.html
```erb
<% if current_user %>
  <h1>welcome to my app</h1>
<% else %>
  <%= link_to "ログイン", login_path%>
<% end %>


<h2><%= link_to "ユーザー一覧",users_path %></h2>
<h2><%= link_to "投稿一覧", drinks_path %></h2>
<% unless  logged_in? %>
    <div class="col-md-6 col-md-offset-3">
    <%= render 'shared/form' %>
  </div>
<% end %>



  <% if current_user %>
    <p>ログインしてます</p>
    <%= link_to @current_user.nickname, user_path(@current_user) %>
    <%= link_to "ログアウト",logout_path,method: :delete %>
    <%= link_to "投稿する", new_drink_path %>
    <%= link_to "退会する", user_path(current_user),method: :delete %>
  <% else %>
    <strong>ログインしてません</strong>
  <% end %>
```

前回定義したcurrent_userメソッドや、logged_in？メソッドを使ってみました
![スクリーンショット 2020-11-23 18.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/0d611d9e-2a86-6806-943c-fc265a9df9ae.png)

これが今回のルート画面です

ログインしてみます

![1606132818649@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/5c6a4ca6-8d77-7606-a3cf-33330a6944dc.jpeg)

しっかり前回書いたコードが機能してるみたいですね、、、！！

#### users/show.html.erb
```erb

<h1><%= current_user.nickname%></h1>
<%= link_to "toppage", root_path %>
<%= link_to "setting", edit_user_path(current_user)%>

  <p><%= current_user.nickname %>さんの投稿一覧</p>
  <% @drinks.each do |drink| %>
      <%= drink.price%>
      <span class="name"><%= drink.name %></span>
      <p><%= drink.explain %></p>
  <% end %>
```

drinkリソースの実装は次回で書きます

前回書いたusers#showあたりがしっかり機能していて、sessions_helperのcurrent_userも使えます
便利メソッドはビューでも呼び出せるので、ビューでも呼び出したいメソッドはhelperメソッドに定義した方がいいのかもしれません

### 次はuserの更新を見てみましょう

先ほどのユーザー詳細ページにsettingというところをクリックすると

![1606133218088@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/d345d2cc-b247-ae89-32f0-1f00709b3de8.jpeg)

という画面に遷移します

コードはこんな感じ

#### users/edit.html.erb

```erb
<h1>Update <%= @user.nickname %>'s profile</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= render 'shared/form' %>
  </div>
</div>
```

```erb
<%= render 'shared/form' %>
```

部分テンプレートを使用してるのでそちらもみてみましょう

#### shared/_form.html.erb

```erb
<%= form_with(model: @user, local: true) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>

  <%= f.label :nickname %>
  <%= f.text_field :nickname, class: 'form-control' %>


  <%= f.label :email %>
  <%= f.email_field :email, class: 'form-control' %>

  <%unless @current_user%>
    <%= f.label :password %>
    <%= f.password_field :password, class: 'form-control' %>

    <%= f.label :password_confirmation %>
    <%= f.password_field :password_confirmation, class: 'form-control' %>
  <% end %>
  <%= f.submit "submit"%>
<% end %>
```

ここは新規登録ページのユーザーに関する入力フォームと一緒です

ですが
```
  <%unless @current_user%>
  <%end%>
```

とパスワードに関するフォームを囲むことにより、現在ログインしてる本人ならパスワードを改めて入力せずに
プロフィールの更新ができます。

パスワードを入力せずに値を更新するためには

#### user.rb

```ruby
 validates :password, presence: true, length: { minimum: 6 },allow_nil: true
```
allow_nil: true　にしなければなりません

パスワードがなくても新規登録できちゃうじゃん！

と思うかもしれませんが、has_secure_passwordをuser.rbに書いてるので、
新規登録の時はhas_secure_passwordくんがパスワードあるかどうか確かめてくれるらしいです、
賢いですね。

とりあえず「そうくん」に名前を変更しときましょう

## ログインしたことによるトップページの変化

![トップ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/faa9cb78-3bad-a4f6-9909-0b0b9824c161.jpeg)

### では早速ログアウトしてみましょう

![トップ2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/6577d1b7-a78d-0876-9bed-5e213f45433d.jpeg)

ログインしてないバージョンのtoppageに戻ります

### そしてもう一回ログイン

![ログイン画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/64b44d70-0343-86b5-9de1-2dd090abb0d3.jpeg)


![ログイン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/338f94de-8a65-1455-59d6-0b166e94ef5e.jpeg)

ユーザーの詳細ページにリダイレクトされました
ユーザーが投稿したコーヒーの感想がチラッと見えてますが、これは次回投稿します

ちなみにremember me on this computerにチェックしたので、ブラウザを閉じたりしてもログイン情報は保持される仕組みです

どのような仕組みかは前回解説しております

何はともあれ前回書いたコードがしっかり機能することが確かめられました、、、！
本当はrails consoleとかでもうちょい上手く確かめられると思うのですが、、、、、

####次回はコーヒーの感想を投稿したり、削除したり、一覧表示したり、誰の投稿かを定義したり、drinkリソースに関することをやっていきたいと思います