Home Ruby on Rails Tutorial Ruby Tutorial: Making Instagram

Ruby Tutorial: Making Instagram

98
0
SHARE

Introduction

First thing first, to start building your own ‘Instagram’ web, you should create a new project for that in our rails. We need to do it in our terminal. What I mean by terminal, is a console command where we can type and calls rails code. In windows, it might be your command prompt with ruby or your git bash, and so on. I assume you’ve already had it in your respective operating systems. So let’s go straight to the code. Do you forget how to create you new project in rails? Type this code below.

rails new [your project name]

Inside ‘[your project name]’, you need to type what is the title of your new project, without the brackets. For example, mine was like this.

rails new Zippogram

After that, rails will create new files for your project.

 

Build a controller

When we finished creating our new project, let’s take a look whether our project can run perfectly. In your terminal, move to your newly created project directory and then run your server by typing :

rails s

or

rails server

 

After you do it, try to open your web browser and then go to http://localhost:3000/. If it runs perfectly, you will see Rails welcome page.

So far, we don’t have an index page for our new project, and instead it is only showing a welcome page of rails. For now, let’s make a controller for our post, so that the homepage of our website will show a list of our indexed post.

Start by making a controller in your terminal.

rails g controller posts

This command will create a new file named posts_controller.rb in our app/controllers folder. Open this file and edit it to make a new controller action. For now, let’s just make an empty action for our post controller.

Add this line of code to your posts_controller.rb file.

def index

end

 

Routing for posts controller

So far, our index page are not showing an index page, and instead shows us a welcome page of rails. For now, let’s try to reroute our homepage so that each and every time we access our ‘instagram’ web it will show an index of our post. We’re going to use a resources method to edit the controller of our web apps, so that each time our ‘instagram’ site is accessed, our controller will route it to the resource that we listed.

Open your routes.rb file in the config folder, add something like this.

resources :posts

 

Let’s take another step to create a view for our posts controller. Add an index.html.erb at folder app/views/posts. If there is no ‘posts’ folder inside views, then you can create a new one. Let’s create a simple view by editing our index file. You can modify it as you like, for my case I want a simple view that tells user the name of our site and its creator.

<h1>Zippogram</h1>

<h2>Maintained by Zippo</h2>

<%= render @posts%>

 

When you’re done doing that, move on to your routes.rb file and add a new line of code, to tell rails that we would use an index view of posts controller to be our root.

root ‘posts#index’

 

And now you’re done. Each and everytime you access your page, it will access our posts model with an index as its root. After doing this, my site is looking like this. I know, it is so plain right? We will style it for sure, but not now. We have another business to do first.

 

Creating a database

Before we can make a list of image post with a caption below it, we need to make a database that stores image with its related caption. To do that, we will utilize and make a new model. First, let’s start by making a database for our caption. In your terminal, type this code below.

rails g model Post caption:string

rake db:migrate

 

For our image, we will use an additional gem that will be utilized as our image holder, it is called a paperclip. But before that, we need to install imagemagick, which is required for paperclip to run perfectly on our computer. Download it from this link, and then install it on your computer. For the installation and configurations of paperclip, you can look at it here. On your terminal, type this code below to install paperclip gem.

gem install paperclip

 

When you’re done doing it, move on to edit our post model. It is located in models/post.rb. Inside it, let’s attach our paperclip to our post model by doing something like this.

class Post < ActiveRecord::Base

has_attached_file :image

end

 

Next, let’s generate its database and then migrate it.

rails g paperclip post image

rake db:migrate

 

You have installed a paperclip gem. The next part is to make a post validator for our paperclip. For the sake of this tutorial, let’s stick with only allowing an image with a medium size to be uploaded. In your post.rb model, modify it like this.

class Post < ActiveRecord::Base

validates :image, presence: true

 

has_attached_file :image, styles: { :medium => “640x” }

validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/

end

 

When you’re done doing that, let’s move on to make a submit function to our user, so that they can add a new image and its caption to our ‘instagram’. Let’s use a simple_form gem to satisfy our needs. Install simple_form and then bundle it into your project. After that, we need to edit our controller to make sure our new action can run. Open your posts_controller.rb, add this line in it.

def new

@post = Post.new

end

 

We need to make a view for our new posts action, so create a new.html.erb inside views/posts, and then edit it like this.

<%= simple_form_for @post do |f| %>

<%= f.input :image %>

<%= f.input :caption %>

<%= f.button :submit %>

<% end %>

And here, you finally created a form for our users so that they can input their photos to our site. But wait, when you try to submit an image, it will show you an error. To fix that, you will need to create a new action called create. So, add this line of code to your post_controller.rb.

def create

@post = Post.create(post_params)

redirect_to root_path

end

 

private

def post_params

params.require(:post).permit(:image,:caption)

end

 

def index

@posts = Post.all

end

 

And here, we have created a new action so that we can send an image to our site. We also add the functionality of automatically returns an index page for user after they’ve submitted their own image. Let’s add another functionality that will increase our user experience. In our index page, let’s add another method to make sure user can iterate our image one by one automatically. Within your index.html.rb’s view, add this block of code.

<%= render @posts%>

 

<% @posts.each do |post| %>

<%= image_tag post.image.url(:medium) %>

<%= post.caption %>

<% end %>

 

And voila, you’ve successfully make a beautiful index page. For the next part, we will try to beautify our site so on.

 

Problem Solving

– Paperclip can’t upload your image.

This problem occurs if you are running windows, and have installed paperclip at least at version 4. This error happens because paperclip want to use a file spoofing to determine the type of our uploaded files. Because windows doesn’t provide file command, paperclip will never be able to determine a file type. To fix this, we need to disable spoofing module in papercip. To do this, create a new file named paperclip_media_type_spoof_detector_override.rb inside your initializers folder. Inside it, add this block of code.

require ‘paperclip/media_type_spoof_detector’

module Paperclip

class MediaTypeSpoofDetector

def spoofed?

false

end

end

end

 

– Upload successfully, but image is not shown

This problem can happen because many reasons. One of the reason is the file you are uploaded to our site, and the get module are not in sync. It means, the required path to be shown and the path of our uploaded file are not the same. Make sure in your index.html.erb and post.rb model’s has the same attribute of image. For example, these index.html.erb and post.rb model are in sync, because it has the same attribute of ‘medium’ in their image tag.

 

# inside index.html.erb

class Post < ActiveRecord::Base

validates :image, presence: true

 

has_attached_file :image, styles: { :medium => “640x” }

validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/

end

# inside post.rb model

<%= render @posts%>

 

<% @posts.each do |post| %>

<%= image_tag post.image.url(:medium) %>

<%= post.caption %>

<% end %>

SHARE
Previous articleActiveRecord Association – Ruby Tutorial
Next articleRails Crud Operation
mm
Taichi lover, book addicts, lost himself in the realm of writing code and poetry. Want to talk more? Need help on Ruby on Rails? we can help :)

LEAVE A REPLY

Please enter your comment!
Please enter your name here