※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。
CRUD(クラッド)とは
Create・Read・Update・Delete のこと
Webアプリケーションの基本的な機能をすべて備えているものを「CRUDアプリ」という
Create
「Create」（POSTリクエスト）
- 記事を作成する
今回、実装したいこと
newアクション：投稿画面に行くまでのリンクを作る
:newのリンクを作る
:newを書き加える（定義する）
resources :articles, only: [:show, :new]新規投稿ボタンを作る
app/views/layouts/application.html.erbの<head>タグの中で、font-awesomeを読み込む
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">app/assets/stylesheets/application.scssに以下を記入（参考までに）
.float_btn {
position: fixed;
bottom: 16px;
right: 16px;
width: 64px;
height: 64px;
border-radius: 100%;
text-align: center;
background-color: $primary-color;
color: white;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
i {
margin-top: 22px;
}
}app/views/articles/index.html.erbの最下部にコードを追加する
<div class="float_btn">
<i class="fa fa-plus"></i>
</div>- 「i」はアイコンのこと
- 「class=”fa fa-plus“」で「＋」マークのアイコンを指定できる
↓ 自分で考えて書いたコード
<div class="float_btn">
<%= link_to '<i class="fa fa-plus"></i>'.html_safe, new_article_path %>
</div>「＋」アイコンが消えたり、アイコンの代わりにコードが表示されたり・・
chatGPTを見て.html_safeを足したらうまくできた
html_safeメソッドを使用することで、Railsが自動的にエスケープしないようにして、正しいHTMLを生成します。
けど、アイコンの色が白じゃなくてグレーになってしまった
↓ 先生の書いたコード
<%= link_to new_article_path do %>
<div class="float_btn">
<i class="fa fa-plus"></i>
</div>
<% end %>なるほど！とてもきれい
#DAY11
