Make an instagram clone app ③

Introduction

As the title suggests, we will create a simplified Instagram app. I will write the article in the following steps, so I hope you will read it step by step.

App creation-Implementation of login functionImplementation of photo posting function ③ [Implementation of user page] (https://qiita.com/maca12vel/items/c716702b02f977303011) ← Imakoko ④ [Implementation of follow function] (https://qiita.com/maca12vel/items/2760d33f3683fac91de5) ⑤ Implementation of post deletion function

Create / edit Users Controller

As a naming convention, the model name is singular and the controller name is plural. This time it's a controller name, so it's pluralized as `ʻusers``.

rails g controller users

Don't forget to set up the routing as well.

routes.rb


Rails.application.routes.draw do
  root 'homes#index'

  devise_for :users

  resources :photos
  resources :users #← here
end

Once set, edit `ʻusers_controller.rb``.

users_controller.rb


class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
  end
end

Show action now lists users.

Edit view file

In the previous article, I was able to see the images and text posted on the home screen, This time, we will edit it so that the posted content can be seen on each user's page.

First, from the creation of the user page. Create and edit show.html.erb in ```app / views / users``.

erb:app/views/users/show.html.erb


<h3><%= @user.email %></h3>

<% @user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>
<% end %>

@ user.email is an alternative to the username. And display the contents of the previous post <% current_user.photos.each do |photo| %> Where I was <% @user.photos.each do |photo| %> It was made.

Of course, the posted content displayed on the home screen will be deleted.

erb:app/views/homes/index.html.erb


<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>

<div>
  <%= link_to 'Photo posting', new_photo_path %>
</div>

#↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Delete below from here ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<% current_user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>
<% end %>

After deleting, display the link to each user's page.

erb:app/views/homes/index.html.erb


<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>

<div>
  <%= link_to 'Photo posting', new_photo_path %>
</div>

#↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Add below from here ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<% User.all.each do |user| %>
<div>
  <%= link_to user.email, user_path(user) %>
</div>
<% end %>

I'm using my email address instead of my username. For ```user_path (user) , check the Prefix of rails routes. This time we also need to identify the ** `ʻuser id **, so we need (user).

If the home screen looks like the one below, you are successful. Image from Gyazo

The actual behavior is like this. Image from Gyazo

When you access the [email protected] page, The user name is displayed at the top, followed by the posted content.

When you access the ```[email protected]`` page, Only the username is displayed as it has not been posted yet.

By the way, so that you can access each user's page even if you are not logged in You have not set before_action to ```users_controller``.


that's all. Thank you for your hard work.

Next → ④ [Implementation of follow function] (https://qiita.com/maca12vel/items/2760d33f3683fac91de5)

Recommended Posts

Make an instagram clone app ④
Make an instagram clone app ②
Make an instagram clone app ③
Make an instagram clone app ①
Make an android app. (Day 5)
Make an android app. (First day)
App development beginners tried to make an Android calculator app
Let's make the app better
Is it an Android app?
Make an FPS counter in Swift
Create an app with Spring Boot 2
Create an app with Spring Boot
How to make an app with a plugin mechanism [C # and Java]