Project

General

Profile

Support #710

Building a Simple Messenger Web Application with Ruby on Rails

Added by Daniel Curtis almost 5 years ago. Updated about 4 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
Ruby
Target version:
Start date:
12/09/2015
Due date:
% Done:

100%

Estimated time:
3.00 h
Spent time:

Description

NOTE: This guide was adapted from the Ruby on Rails tutorial on Codecademy

  • Create the new Ruby on Rails web application:
    rails new message_app
    
  • Change into the message_app directory:
    cd message_app
    
  • Start the rails development web server locally:
    bundle exec rails s
    
    • NOTE: The development web server bind the IP address to the localhost by default, so accessing it over the network will not work. To allow network access to the development web server:
      bundle exec rails s -b 0.0.0.0
      

The Main Page

Main Page Controller

  • Create a controller for the Page class:
    rails generate controller Page
    
  • Edit the routes file:
    vi config/routes.rb
    
    • And add the route for the default landing page:
      Rails.application.routes.draw do
        get '/' => "page#home" 
      end
      
  • Edit the Page controller:
    vi app/controllers/page_controller.rb
    
    • And create the home method:
      class PageController < ApplicationController 
        def home
        end
      end
      

Main Page View

  • Edit the home page view:
    vi app/views/page/home.html.erb
    
    • And add the following bare html page:
      <div class="main">
        <div class="container">
          <h1>Hello World!</h1>
        </div>
      </div>
      

The Message Page

Create the Message Model

  • Start by creating a Message model:
    rails generate model Message
    
  • Edit the database migrate file:
    vi db/migrate/20151209164020_create_messages.rb
    
    • And add the *t.text :content* to create the content row to the messages table:
      class CreateMessages < ActiveRecord::Migration
        def change
          create_table :messages do |t|
            t.text :content
            t.timestamps
          end
        end
      end
      
  • Run the database migration:
    rake db:migrate
    

Create the Message Controller

  • Create the Messages controller:
    rails generate controller Messages
    

Index Method

  • Next edit the routes file:
    vi config/routes.rb
    
    • Then map the URL /messages to the Messages controller index action:
      Rails.application.routes.draw do
        get '/' => "page#home" 
        get '/messages' => "messages#index" 
      end
      
  • Edit the Messages controller:
    vi app/controllers/messages_controller.rb
    
    • And define an index method with a class array named @messages that contains all the messages in the database table:
      class MessagesController < ApplicationController
        def index 
          @messages = Message.all 
        end
      end
      

Create the Message View

  • Edit the messages index Ruby HTML view:
    vi app/views/messages/index.html.erb
    
    • Then create a for loop to loop through the contents of the @messages array:
      <div class="header">
        <div class="container">
          <h1>Messenger</h1>
        </div>
      </div>
      
      <div class="messages">
        <div class="container">
          <% @messages.each do |message| %> 
          <div class="message"> 
            <p class="content"><%= message.content %></p> 
            <p class="time"><%= message.created_at %></p> 
          </div> 
          <% end %>
        </div>
      </div>
      

Create the New Message Function

New Method

  • Edit the routes file
    vi config/routes.rb
    
    • Then create a route that maps requests to messages/new to the Message controller's new action:
      Rails.application.routes.draw do
        get '/' => "page#home" 
        get '/messages' => 'messages#index'
        get 'messages/new' => 'messages#new'
      end
      
  • Edit the Messages controller:
    vi app/controllers/messages_controller.rb
    
    • And define the new method that adds new messages to the database table:
      class MessagesController < ApplicationController
        def index 
          @messages = Message.all 
        end
      
        def new
          @message = Message.new 
        end
      end
      

Create Method

  • Edit the routes file again
    vi config/routes.rb
    
    • And map requests to the Message controller's create action:
      Rails.application.routes.draw do
        get '/' => "page#home" 
        get '/messages' => 'messages#index'
        get 'messages/new' => 'messages#new'
        post 'messages' => 'messages#create'
      end
      
  • Edit the Messages controller again:
    vi app/controllers/messages_controller.rb
    
    • And create the create method and the private message_params method below the new method:
      class MessagesController < ApplicationController
        def index 
          @messages = Message.all 
        end
      
        def new
          @message = Message.new 
        end
      
        def create 
          @message = Message.new(message_params) 
          if @message.save 
            redirect_to messages_path 
          else 
            render 'new' 
          end 
        end
      
        private 
        def message_params 
          params.require(:message).permit(:content) 
        end
      end
      

Create the New Message View

  • Edit the new message Ruby HTML view:
    vi app/views/messages/new.html.erb
    
    • And add the following:
      <div class="header">
        <div class="container">
          <h1>Messenger</h1>
        </div>
      </div>
      
      <div class="create">
        <div class="container">
          <%= form_for(@message) do |f| %>  
            <div class="field"> 
              <%= f.label :message %><br> 
              <%= f.text_area :content %> 
            </div> 
            <div class="actions"> 
              <%= f.submit "Create" %> 
            </div> 
          <% end %>
        </div>
      </div>
      
  • Edit the messages index Ruby HTML view:
    vi app/views/messages/index.html.erb
    
    • And add the link_to function:
      <div class="header">
        <div class="container">
          <h1>Messenger</h1>
        </div>
      </div>
      
      <div class="messages">
        <div class="container">
          <% @messages.each do |message| %> 
          <%= link_to 'New Message', messages_new_path %>
          <div class="message"> 
            <p class="content"><%= message.content %></p> 
            <p class="time"><%= message.created_at %></p> 
          </div> 
          <% end %>
        </div>
      </div>
      

Create the Show Message Function

  • Edit the routes file again
    vi config/routes.rb
    
    • And map requests to the Message controller's create action:
      Rails.application.routes.draw do
        get '/' => "page#home" 
        get '/messages' => 'messages#index'
        get 'messages/new' => 'messages#new'
        post 'messages' => 'messages#create'
        get '/messages/:id', to: 'messages#show, as: 'message'
      end
      

Show Method

  • Edit the Messages controller again:
    vi app/controllers/messages_controller.rb
    
    • And create the create method and the private message_params method below the new method:
      class MessagesController < ApplicationController
        def index 
          @messages = Message.all 
        end
      
        def new
          @message = Message.new 
        end
      
        def create 
          @message = Message.new(message_params) 
          if @message.save 
            redirect_to messages_path 
          else 
            render 'new' 
          end 
        end
      
        private 
        def message_params 
          params.require(:message).permit(:content) 
        end
      
        def show
          @message = Message.find(params[:id])
        end
      end
      

Create the Show Message View

  • Edit the show message Ruby HTML view:
    vi app/views/messages/show.html.erb
    
    • And add the following:
      <div class="header">
        <div class="container">
          <h1>Messenger</h1>
        </div>
      </div>
      
      <div class="show">
        <div class="container">
          <div class="message"> 
            <%= @message.content %> 
          </div>
        </div>
      </div>
      

Resources

History

#1 Updated by Daniel Curtis almost 5 years ago

  • Description updated (diff)
  • Status changed from New to In Progress
  • % Done changed from 0 to 30

#2 Updated by Daniel Curtis almost 5 years ago

  • Description updated (diff)

#3 Updated by Daniel Curtis over 4 years ago

  • Subject changed from Building a Simple Messenger Web Application in Ruby to Building a Simple Messenger Web Application with Ruby on Rails
  • Description updated (diff)

#4 Updated by Daniel Curtis over 4 years ago

  • Description updated (diff)
  • % Done changed from 30 to 50

#5 Updated by Daniel Curtis over 4 years ago

  • % Done changed from 50 to 60
  • Description updated (diff)

#6 Updated by Daniel Curtis over 4 years ago

  • Status changed from In Progress to Resolved
  • % Done changed from 60 to 100

#7 Updated by Daniel Curtis over 4 years ago

  • Status changed from Resolved to Closed

#8 Updated by Daniel Curtis about 4 years ago

  • Description updated (diff)

#9 Updated by Daniel Curtis about 4 years ago

  • Description updated (diff)

#10 Updated by Daniel Curtis about 4 years ago

  • Description updated (diff)

#11 Updated by Daniel Curtis about 4 years ago

  • Description updated (diff)

#12 Updated by Daniel Curtis about 4 years ago

  • Description updated (diff)

#13 Updated by Daniel Curtis about 4 years ago

  • Description updated (diff)

Also available in: Atom PDF