Support #710

Building a Simple Messenger Web Application with Ruby on Rails

Added by Daniel Curtis about 9 years ago. Updated over 8 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Daniel Curtis

Category:

Ruby

Target version:

*nix

Start date:

12/09/2015

Due date:

% Done:

100%

Estimated time:

3.00 h

Spent time:

7.00 h

Description

Table of contents
The Main Page
- Main Page Controller
- Main Page View
The Message Page
Create the New Message Function
Create the Show Message Function
- Show Method
- Create the Show Message View
Resources

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¶

Updated by Daniel Curtis about 9 years ago

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

Updated by Daniel Curtis about 9 years ago

Description updated (diff)

Updated by Daniel Curtis almost 9 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)