Task management application creation procedure

1. Preparation for application creation

1-1. Think about the content of the application to be created

function Function content
List display List all tasks
Detail View Display the details of one task
sign up Register new task in db
Edit Edit the registered task and update the db
Delete Delete registered tasks from db

1-2. Decide the application name and create a template

rails new application name[option]

#Example)

rails new taskmanage -d postgresql

1-3. Create db

Go to the directory where you created the application and create a db

rails db:create

1-4. Try starting the server

Hit the following command, 「http://localhost:3000」 Go to and see if the rails default page is displayed

rails s

2. Create a model

Model components

--Ruby class corresponding to the model Camel case

--Database table corresponding to the model Snake case with multiple model class names

2-1. Design the attributes of the model

attribute Attribute name Data type Do you allow null Default value
name name string not allowed None
detailed explanation description text to approve None

2-2. Create a model template

rails g model [Model name] [Attribute name:Data typeAttribute name:Data type...] [option]

#Example)

rails g model Task name:string description:text

2-3. Migrate and add table to db

Check the created migration file and execute ** rails db: migrate **

3. Create controller and view

rails g controller controller name[Action name Action name...] [option]

#Example)

rails g controller tasks index show new edit
Rails.application.routes.draw do
 root to: 'tasks#index'
 resources :tasks
end

3. Implementation of new registration function

3-1. Added a link to the new registration page on the list screen

= link_to 'sign up', new_task_path

3-2. Implemented actions for new registration screen

tasks_controller.rb


def new
 @task = Task.new
end

3-3. Implemented new registration page view

slim:new.html.slim


= form_with model: @task, local: true do |f|
 .form-group
  = f.label :name #label =Focus the input field by displaying the name of the input field and clicking the label part
  = f.text_field :name
 .form-group
  = f.label :description
  = f.text_area :description
 = f.submit nil

3-4. Implementation of registration action

** create action ** = "Save the data sent from the registration form in the db and move to the list screen"

tasks_controller.rb


def create
 @task= Task.new(task_params)
 task.save
 redirect_to tasks_url, notice:"task"#{task.name}Has been registered."
end
private
 def task_params #Strong parameters = Information sent from the form as request parameters is as expected{task: {...}}The role of checking if it is in the form of and extracting only the necessary information
  params.require(:task).permit(:name, :description)
 end

Difference between render and Redirect_to

render Redirect_to
Display the view following the action Direct to another URL without displaying the view immediately after processing the action

flash message

Deliver a bit of data to the next request when redirecting

 redirect_to tasks_url, notice:"task"#{task.name}Has been registered."
#Means to redirect after sending a task registration completion message

flash.now[:alert] = "Alert immediately"
#If in the same request, flash.now

4. Implementation of list display function

4-1. Implemented actions for new registration screen

tasks_controller.rb


def index
 @tasks = Task.all
end

4-2. Display all tasks on the list page

@tasks.each do |task|
 task.name
 task.created_at

5. Implementation of detailed display function

5-1. Added a link from the list page to the detail page

ruby:index.html.slim


link_to task.name, task_path(task)

5-2. Get the selected task with the detail display action

tasks_controller.rb


def show
 @task = Task.find(params[:id])
end

5-3. Get the selected task with the detail view action

ruby:show.html.slim


@task.id
@task.name
@task.created_at
@task.updated_at

6. Implementation of editing function

6-1. Added a link to the edit page on the list page and detail page

ruby:index.html.slim


link_to 'Edit', edit_task_path(task)

ruby:show.html.slim


link_to 'Edit', edit_task_path

6-2. Define edit and update actions

tasks_controller.rb


def edit
 @task = Task.find(params[:id])
end

def update
 task = Task.find(params[:id])
 task.update!(task_params)
 redirect_to tasks_url, notice: "task"#{task.name}"The has been updated."
end

6-3. Implemented edit page view

slim:new.html.slim


= form_with model: @task, local: true do |f|
 .form-group
  = f.label :name #label =Focus the input field by displaying the name of the input field and clicking the label part
  = f.text_field :name
 .form-group
  = f.label :description
  = f.text_area :description
 = f.submit nil

Commonality using partial templates

Use a partial template to put together the common parts of the new registration page and the edit page

ruby:_form.html.slim


= form_with model: task, local: true do |f|
 .form-group
  = f.label :name 
  = f.text_field :name
 .form-group
  = f.label :description
  = f.text_area :description
 = f.submit nil

Partial template call

ruby:new.html.slim


= render partial: 'form'. locals: {task: @task} #"Instance variables@Pass task as a local variable task in a partial "

ruby:edit.html.slim


= render partial: 'form'. locals: {task: @task}

7. Implementation of delete function

7-1. Added a cut button to the list page and detail page

ruby:index.html.slim


= link_to 'Delete', task, method: :delete, date: { confirm: "task"#{task.name}」をDeleteします。よろしいですか?"}

ruby:show.html.slim


= link_to 'Delete', @task, method: :delete, date: { confirm: "task"#{task.name}」をDeleteします。よろしいですか?"}

7-2. Define the destroy action

tasks_controller.rb


def destroy
 task = Task.find(params[:id])
 task.destroy
 redirect_to tasks_url, notice: "task"#{task.name}Was deleted."
end

[Reference | Ruby on Rails 5 Quick Learning Practice Guide that can be used in the field](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD % BF% E3% 81% 88% E3% 82% 8B-Ruby-Rails-5% E9% 80% 9F% E7% BF% 92% E5% AE% 9F% E8% B7% B5% E3% 82% AC % E3% 82% A4% E3% 83% 89-% E5% A4% A7% E5% A0% B4% E5% AF% A7% E5% AD% 90 / dp / 4839962227)

Recommended Posts

Task management application creation procedure
Personal application creation # 2
Personal application creation # 3
Personal application creation # 1
[Personal application creation] Information management application production 16th day
[Personal application creation] Information management application production 14th day
Personal application creation term
[Spring Boot] Web application creation
TECH CAMP learning personal application creation ③
TECH CAMP learning personal application creation ②
RSpec ~ Task model validation test creation
Inquiry application creation with Spring Boot
Web application creation with Nodejs with Docker