Opdm2113
Opdm2113
Nov 8 · 4 min read
Create

Create New Articles from UI — Text directions and code

In the config/routes.rb file add the following line to add all the routes for articles:

resources :articles

This will add the following routes:

routes path HTTP verb link controller#action

articles index articles GET /articles articles#index

new article new_article GET /articles/new articles#new

create article POST /articles articles#create

edit article edit_article GET /articles/:id articles#edit

update article PATCH /articles/:id articles#update

show article article GET /articles/:id articles#show

delete article DELETE /articles/:id articles#destroy

To create articles controller with a new action, under app/controllers create a file named articles_controller.rb (snake case):

class ArticlesController < ApplicationController

def new

@article = Article.new

end

end

To create a view, under app/views create a folder named articles and within it create a file named new.html.erb then fill in the following:

<h1>Create an article</h1>

<%= form_for @article do |f| %>

<p>

<%= f.label :title %><br/>

<%= f.text_field :title %>

</p>

<p>

<%= f.label :description %><br/>

<%= f.text_area :description %>

</p>

<p>

<%= f.submit %>

</p>

<% end %>

Create action and private article_params method for string parameters in the articles controller (Note: This is not complete):

def create

@article = Article.new(article_params)

@article.save

redirect_to article_path(@article)

end

private

def article_params

params.require(:article).permit(:title, :description)

end

Complete New and Show Actions — Text directions and code

Completed create action in articles controller:

def create

@article = Article.new(article_params)

if @article.save

flash[:notice] = “Article was successfully created”

redirect_to article_path(@article)

else

render ‘new’

end

end

Flash message code added to application.html.erb under app/views/layouts folder (right under <body> and above <%= yield %>:

<% flash.each do |name, msg| %>

<ul>

<li><%= msg %></li>

</ul>

<% end %>

Code added to display errors in the new.html.erb template under app/views/articles folder:

<% if @article.errors.any? %>

<h2>The following errors prevented the article from getting created</h2>

<ul>

<% @article.errors.full_messages.each do |msg| %>

<li><%= msg %></li>

<% end %>

</ul>

<% end %>

To create the show action, add the following show method to articles_controller.rb file:

def show

@article = Article.find(params[:id])

end

To create the show view, add a show.html.erb file under the app/views/articles folder and fill in the code:

<h1>Showing selected article</h1>

<p>

Title: <%= @article.title %>

</p>

<p>

Description: <%= @article.description %>

</p>

Edit Articles — Text directions and code

Route for editing articles takes the form ->

/articles/:id/edit

Edit action in the articles controller:

def edit

@article = Article.find(params[:id])

end

Update action in the articles controller:

def update

@article = Article.find(params[:id])

if @article.update(article_params)

flash[:notice] = “Article was successfully updated”

redirect_to article_path(@article)

else

render ‘edit’

end

end

To create edit template, create a file named edit.html.erb under the app/views/articles folder and fill in the following code:

<h1>Edit existing article</h1>

<% if @article.errors.any? %>

<h2>The following errors prevented the article from getting created</h2>

<ul>

<% @article.errors.full_messages.each do |msg| %>

<li><%= msg %></li>

<% end %>

</ul>

<% end %>

<%= form_for @article do |f| %>

<p>

<%= f.label :title %><br/>

<%= f.text_field :title %>

</p>

<p>

<%= f.label :description %><br/>

<%= f.text_area :description %>

</p>

<p>

<%= f.submit %>

</p>

<% end %>

Destroy and Partials — Text directions and code

Add this link to the homepage (root route) so you can access the blog from the homepage:

<%= link_to “Alpha Blog”, articles_path %>

Under app/views/layouts folder create a _messages.html.erb file (messages partial) and remove the following code from application.html.erb to this file:

<% flash.each do |name, msg| %>

<ul>

<li><%= msg %></li>

</ul>

<% end %>

In place of this code in the application.html.erb add the following code:

<%= render ‘layouts/messages’ %>

Create a file under app/views/articles folder called _form.html.erb and fill it in with the following code (copied from the new or edit.html.erb page):

<% if @article.errors.any? %>

<h2>The following errors prevented the article from getting created</h2>

<ul>

<% @article.errors.full_messages.each do |msg| %>

<li><%= msg %></li>

<% end %>

</ul>

<% end %>

<%= form_for @article do |f| %>

<p>

<%= f.label :title %><br/>

<%= f.text_field :title %>

</p>

<p>

<%= f.label :description %><br/>

<%= f.text_area :description %>

</p>

<p>

<%= f.submit %>

</p>

<% end %>

<%= link_to “Back to articles listing”, articles_path %>

Then remove the code above from both new.html.erb and edit.html.erb files and in it’s place add the following code:

<%= render ‘form’ %>

To add the destroy method, first add the following to the articles controller:

def destroy

@article = Article.find(params[:id])

@article.destroy

flash[:notice] = “Article was successfully deleted”

redirect_to articles_path

end

Then in the index.html.erb (listings page) add the following link as one of the <td> items under the show article link:

<td><%= link_to ‘Delete’, article_path(article), method: :delete, data: {confirm: “Are you sure?”} %></td>

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade