Create an EC site with Rails5 ② ~ Bootstrap4 settings, Controller / action definition ~

Introduction

This is a continuation of the series that creates an EC site where you can shop at a fictitious bakery, Create an EC site with Rails5 ①. Align the required Controller and View, write only the definition of the action, and enable the minimum page transition.

Source code

https://github.com/Sn16799/bakeryFUMIZUKI

Controller Make a controller at once. Actions that also involve View are created together 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

Write the action without View in the Controller file. I will write the details later, so for now, I will give priority to defining actions and page transitions.

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 will omit the installation of gem (bootstrap, jquery-rails) because I did previous.

Rename ** app / assets / stylesheets / application.css ** to ** application.scss **. Describe the loading of Bootstrap in that file.

appseets/stylesheets/application.scss

@import 'bootstrap';

Make the same description in the javascript file.

app/assets/javascripts/application.js

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

You are now ready to use Bootstrap. Let's try it in a suitable 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

The page was displayed correctly and the link labeled "ABOUT" became a button! Bootstrap is applied properly. I haven't set any framework such as container yet, so I'm terribly close to the end as a whole. I'll fix it later, but for now I don't care.

Postscript

I made Routing and Controller for the time being, so I can display all the necessary pages. From the next article, it seems that we will put into the implementation of specific functions. By the way, I'm still wondering what the page design will look like. Basically, I plan to design it for responsiveness based on Bootstrap, but I think it's not bad to try fashionable CSS. Even now, ** "the warm image of the bakery" and "the stylish modern site" are not connected at all, and I feel that I made a mistake in choosing the theme **, but I already have the photo material at hand. I will proceed as it is. Is it possible to finish the website without any discomfort? Continue to Next time!