[Ruby] Create an EC site with Rails 5 ②-Bootstrap 4 settings, Controller/action definition-

2 minute read

Introduction

It is a continuation of the series of making an EC site where you can shop at a fictitious bakery, Create an EC site with Rails 5 ①. Align the necessary Controller and View and write only the action definition so that the minimum page transition is possible.

Source code

https://github.com/Sn16799/bakeryFUMIZUKI

Controller

Make the controller at once. Actions that also involve views will be created here.

Customer site

$ rails g devise:controllers admins
$ rails g devise:controllers customers
$ rails g controller addresses edit index
$ rails g controller cart_items index
$ rails g controller customers edit show withdraw
$ rails g controller genres index show
$ rails g controller homes about top
$ rails g controller order_items index
$ rails g controller orders confirm index new show thanks
$ rails g controller products index show

Admin site

$ rails g controller admins::customers edit index show
$ rails g controller admins::genres edit index
$ rails g controller admins::homes top
$ rails g controller admins::order_items
$ rails g controller admins::orders index show
$ rails g controller admins::products edit index new show
$ rails g controller admins::searches search

Action

Describe actions without a View in the Controller file. I will write the details later, so for now I will define all the actions and give priority to being able to page transition.

Customer site

app/controllers/addresses_controller.rb


  def create
  end

  def update
  end

  def destroy
  end

app/controllers/cart_items_controller.rb


  def create
  end

  def update
  end

  def destroy
  end

  def destroy_all
  end

app/controllers/customers_controller.rb


  def udpate
  end

  def withdraw_done
  end

app/controllers/order_items_controller.rb


  def new
  end

app/controllers/orders_controller.rb


  def create
  end

Admin site

app/controllers/admins/customers_controller.rb


  def update
  end

app/controllers/admins/genres_controller.rb


  def create
  end

  def update
  end

app/controllers/admins/order_items_controller.rb


  def update
  end

app/controllers/admins/orders_controller.rb


  def update
  end

app/controllers/admins/products_controller.rb


  def create
  end

  def update
  end

Bootstrap4 loading

I have omitted about the installation of gem(bootstrap, jquery-rails) since Last time.

Rename app/assets/stylesheets/application.css to application.scss. Write Bootstrap loading in that file.

appseets/stylesheets/application.scss


@import'bootstrap';

Do the same for the javascript file.

app/assets/javascripts/application.js


//= require rails-ujs
//= require activestorage
- -------------------------------
//= require jquery3
//= require popper # add here
//= require bootstrap-sprockets
- -------------------------------
//= require_tree.

Bootstrap is now ready for use. Let’s try using it at an appropriate place.

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


<h1>Homes#top</h1>
<p>Find me in app/views/homes/top.html.erb</p>

<%= link_to'ABOUT', homes_about_path, class:'btn btn-info' %>

localhost:3000/homes/top homes_top.jpg

The page was displayed correctly, and the link labeled “ABOUT” became a button! Bootstrap is applied properly. I haven’t set any frameworks such as containers yet, so I’ve been horrified by the end. I will fix it later, but for now I will not worry about it.

Postscript

For the time being, I made Routing and Controller so that all necessary pages can be displayed. From the next article, I’m going to put it into the implementation of a specific function. By the way, I’m still wondering what the page design will look like. Basically, we plan to make Bootstrap as a responsive design, but I think that it is not bad to try fashionable CSS … In addition, I feel that I have mistaken the theme selection because the “warm image of the bakery” and the “stylish modern website” are not connected at all, but since the photo material is already at hand I will proceed as it is. Is it possible to finish the website without any discomfort? Continue to Next time!