Rails “Friends” app with bootstrap

From scratch

Github link to project: link

Step 1 – Background

Start with Ubuntu 22.04. If you have not yet installed Ruby, Rails, MySQL, Apache, or Phpmyadmin follow the instructions here to add what you do not have: Add Ruby and Rails

Type “ruby -v”. The version should be “3.3.0”

Type ” rails -v”. The version should be “Rails 7.1.3.2”

Make sure you have added, and remember your user and password for mysql (added above)

Type the following commands:

yarn add sass
yarn build:cssCode language: CSS (css)

Step 2 – Create the app and first model.

Create the application:

rails new friends --database mysql -c bootstrap Code language: JavaScript (javascript)

Edit config/database.yml. Set the username and password for mysql to be the ones you made, e.g.:

  username: kenyon
  password: Kenyon2024

Create the friend model, and do the database migration:

bin/rails generate model friend first:string last:string phone:string
rails db:migrate

Try it out:

rails s -b 0.0.0.0Code language: CSS (css)

Go to http://your_vm_ip:3000

Now you need to add a controller for the friends table. Create app/controllers/friends_controller.rb:

class FriendsController < ApplicationController
  def index
    @friends = Friend.all
  end

  def show
    @friend = Friend.find(params[:id])
  end

  def new
    @friend = Friend.new
  end

  def create
    @friend = Friend.new(friend_params)

    if @friend.save
      redirect_to @friend
    else
      render :new, status: :unprocessable_entity
    end
  end

  def edit
    @friend = Friend.find(params[:id])
  end

  def update
    @friend = Friend.find(params[:id])

    if @friend.update(friend_params)
      redirect_to @friend
    else
      render :edit, status: :unprocessable_entity
    end
  end

  def destroy
    @friend = Friend.find(params[:id])
    @friend.destroy

    redirect_to root_path, status: :see_other
  end
  
  private
    def friend_params
      puts "Friend: #{params}"
      params.require(:friend).permit(:first, :last, :phone)
    end

endCode language: HTML, XML (xml)

Add the bootstrap code for in the application header in app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>Friends</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>
	<div class="container-flouid">
	  <nav class="navbar navbar-expand-lg bg-light">
		<div class="container">
		  <a class="navbar-brand" href="/">
			<h3>My Friends</h3>
		  </a>
		  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		  </button>
		  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
			  <li class="nav-item">
				<a class="nav-link active" aria-current="page" href="/friends">Friends</a>
			  </li>

			  <li class="nav-item">
				<a class="nav-link active" aria-current="page" href="/friends/new">New Friend</a>
			  </li>
	
	
			</ul>
			<form class="">
			  <a class="btn btn-outline-primary mr-2" href="#">Login</a>
			  <a class="btn btn-outline-success" href="#">Become member</a>
			</form>
	
		  </div>
		</div>
	  </nav>
	</div>
  <body>
	  <div class="container">
		<%= yield %>
	  </div>
  </body>
</html>Code language: HTML, XML (xml)

Note above we have already added links to the route for seeing the friends index (“/friends”), and the route to create a new friend (“/friends/new”). These won’t work yet, as we need to add. the routes and views.

Lets add the routes for friends, and set the root to be the friends index in config/routes.rb:

Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
  root "friends#index"

  resources :friends
endCode language: PHP (php)

Step 3 – Create the views

We need views for:

  • _form.html.erb
  • edit.html.erb
  • index.html.erb
  • new.html.erb
  • show.html.erb

_form.html.erb

<%= form_with model: friend do |form| %>
  <div>
    <%= form.label :first %><br>
    <%= form.text_field :first %>
    <% friend.errors.full_messages_for(:first).each do |message| %>
    <div><%= message %></div>
    <% end %>
  </div>
  <div>
    <%= form.label :last %><br>
    <%= form.text_field :last %>
    <% friend.errors.full_messages_for(:last).each do |message| %>
      <div><%= message %></div>
    <% end %>
  </div>
  <div>    <%= form.label :phone %><br>
    <%= form.text_field :phone %>
    <% friend.errors.full_messages_for(:phone).each do |message| %>
      <div><%= message %></div>
    <% end %>    
    
   </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>Code language: HTML, XML (xml)

edit.html.erb 

<h1>Edit Friend</h1>

<%= render "form", friend: @friend %>Code language: HTML, XML (xml)

index.html.erb 

<h1>Friends</h1>

<ul>
  <% @friends.each do |friend| %>

    <li>
      <a href="<%= friend_path(friend) %>">
        <%= friend.first %> <%= friend.last %> <%= friend.phone %>
      </a>
    </li>

  <% end %>
</ul>

<%= link_to "New Friend", new_friend_path %>Code language: HTML, XML (xml)

new.html.erb 

<h1>New Friend</h1>

<%= render "form", friend: @friend, :action => "new"  %>Code language: PHP (php)

show.html.erb

<p>Friend: <%= @friend.first %> <%= @friend.last %> <%= @friend.phone %></p>

<ul>
  <li><%= link_to "Edit", edit_friend_path(@friend) %></li>

  <li><%= link_to "Destroy", friend_path(@friend), data: {
                    turbo_method: :delete,
                    turbo_confirm: "Are you sure?"
                  } %></li>
                  
</ul>Code language: HTML, XML (xml)

Run the application and try it – it should work!

Scroll to Top