Use scaffold to form ideas, add, remove, edit, view.
rails generate scaffold idea name:string description:text picture:string
Next, update the database.
rails db:migrate
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Add the following before this one line
app/views/layouts/application.html.erb
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
Also, modify the inside of <body> as follows.
app/views/layouts/application.html.erb
<div class="container">
<%= yield %>
</div>
Then add navigation and footer to your layout. Add the following immediately after <body>.
app/views/layouts/application.html.erb
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">The Idea app</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/ideas">Ideas</a></li>
</ul>
</div>
</div>
</nav>
In addition, add the following just before </ body>.
app/views/layouts/application.html.erb
<footer>
<div class="container">
Rails Girls 2020
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
It also changes the style of the ideas table.
app/assets/stylesheets/application.css
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }
Open Gemfile and
Immediately after gem'sqlite3', add the following line,
gem 'carrierwave'
Then run the following command in the terminal:
bundle
Then you can generate code to perform the upload with the following command:
rails generate uploader Picture
next,
app/models/idea.rb
class Idea < ApplicationRecord
Immediately after, write the following.
app/models/idea.tb
mount_uploader :picture, PictureUploader
further,
app/views/ideas/_form.html.erb
<%= form.text_field :picture %>
Modify this as follows:
app/views/ideas/_form.html.erb
<%= form.file_field :picture %>
This just shows the path of the file. So
app/views/ideas/show.html.erb
<%= @idea.picture %>
Modify the above code as follows.
app/views/ideas/show.html.erb
<%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
config/routes.rb
root to: redirect('/ideas')
rails generate controller pages info
First, set up a Heroku account. User registration screen: (https://signup.heroku.com/)
For Mac
brew install heroku/brew/heroku
Once you have Heroku Toolbelt installed, enter the following command in your terminal:
heroku login
Then add the code you created to your version control system. Enter the following command in the terminal:
echo public/uploads >> .gitignore
git add .
git commit -m "initial commit"
gem 'sqlite3', '~> 1.4'
Modify this code as follows:
group :development do
gem 'sqlite3', '~> 1.4'
end
group :production do
gem 'pg'
end
Then run the following command on the terminal to set it up.
bundle install --without production
git add . git commit -m "Added pg gem and updated Gemfile.lock"
If successful, the following will be displayed.
Creating ⬢ first-app... done http://my-first-app.herokuapp.com/ | https://git.heroku.com/my-first-app.git
If the name of the app is already used, it will be displayed as below.
Creating ⬢ my-first-app... ! ▸ Name first-app is already taken
Push code
Send the code to heroku.
git push heroku main
Database migration
heroku run rails db:migrate
You can see the app from the internet by running the following command.
herku open
Recommended Posts