** If you enter the zip code on the new user registration screen, the subsequent addresses (up to the street address) will be automatically entered. ** **
・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina
The following has been implemented.
・ Slim introduction ・ Introduction of Bootstrap3 -Login function implementation
** ① Access the link below. ** **
** ② Click Clone or download
**
** ③ Click Download ZIP
**
** ④ Place jquery.jpostal.js
in the downloaded folder in ʻapp / assets / javascript`. ** **
Gemfile
gem 'jquery-rails'
gem 'jp_prefecture'
Terminal
$ bundle
application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery //Described below turbolinks
//= require_tree .
Terminal
$ rails g migration AddColumnsToUsers postcode:integer prefecture_code:integer address_city:string address_street:string address_building:string
~_add_columns_to_users.rb
class AddColumnsToUsers < ActiveRecord::Migration[5.2]
def change
add_column :users, :postcode, :integer
add_column :users, :prefecture_code, :integer
add_column :users, :address_city, :string
add_column :users, :address_street, :string
add_column :users, :address_building, :string
end
end
Terminal
$ rails db:migrate
user.rb
include JpPrefecture
jp_prefecture :prefecture_code
def prefecture_name
JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
end
def prefecture_name=(prefecture_name)
self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
end
python
include JpPrefecture
jp_prefecture :prefecture_code
➡︎ Automatically convert from the prefecture code to the prefecture name.
python
def prefecture_name
JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
end
def prefecture_name=(prefecture_name)
self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
end
➡︎ Make it possible to refer to the prefecture name with ~ .prefecture_name
.
Example) @ user.prefecture_name can display the address (prefecture) of the corresponding user.
Add address information to the strong parameter.
application_controller.rb
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [
:email,
:name,
:postcode,
:prefecture_name,
:address_city,
:address_street,
:address_building
])
end
slim:registrations/new.html.slim
/Postscript
= f.label :postcode, 'Postal code'
br
= f.text_field :postcode, autocomplete: 'postcode', class: 'form-control'
br
= f.label :prefecture_name, 'Prefectures'
br
/Display 47 prefectures with a pull-down menu
= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, { prompt: 'Please select' }, class: 'form-control'
br
= f.label :address_city, 'Municipality'
br
= f.text_field :address_city, autocomplete: 'address_city', class: 'form-control'
br
= f.label :address_street, 'address'
br
= f.text_field :address_stree, autocomplete: 'address_street', class: 'form-control'
br
= f.label :address_building, 'building'
br
= f.text_field :address_building, autocomplete: 'address_building', class: 'form-control'
br
Terminal
$ touch app/assets/javascripts/address_autofill.js
address_autofill.js
$(function() {
return $('#user_postcode').jpostal({
postcode: ['#user_postcode'],
address: {
'#user_prefecture_code': '%3',
'#user_address_city': '%4',
'#user_address_street': '%5%6%7',
},
});
});
Recommended Posts