В этой статье мы собираемся создать CRUD-приложение в Rails 7.
Мы собираемся использовать Rails 7.0.4.2 и Ruby 3.1.0 для этого проекта.
Вопросы для обсуждения
- Что такое КРУД?
- Создайте новое приложение для рельсов
- Создать модель
- Создать контроллер
- Создать CRUD
- Скриншоты
- Рекомендации
Что такое КРУД?
Операция CRUD является фундаментальной и очень простой операцией для любого языка программирования. Это означает создание, чтение, обновление и удаление. Чаще всего он используется для создания данных, изменения данных и удаления данных из базы данных.
Rails по умолчанию использует базу данных SQLite.
Создайте новое приложение для рельсов
чтобы создать новый тип приложения rails,
rails new Employee_CRUD
Создать модель
rails g model Employee employee_name gender hobbies
он будет создавать и вызывать такие файлы
Мы используем генератор рельсов для создания модели и передачи имени сотрудника, пола и хобби в качестве полей базы данных. Более того, он создаст файл миграции в папке db/migrate и будет выглядеть так:
class CreateEmployees < ActiveRecord::Migration[7.0]
def change
create_table :employees do |t|
t.string :employee_name
t.string :gender
t.string :hobbies
t.timestamps
end
end
end
Выполнить rails db:migrate . он запустит указанный выше файл миграции.
Создать контроллер
Теперь беги
rails g controller employees index new create show edit update destroy
Он создаст контроллер, а именно employees_controller.rb.
Помимо этого контроллера, эта команда также создает файлы представлений внутри папки представлений и определяет некоторые маршруты в файле routes.rb.
Он создаст 7 представлений файла, когда мы введем index, new, create, show, edit, update и destroy в команде.
→ index.html.erb
→ новый.html.erb
→ создать.html.erb
→ показать.html.erb
→ редактировать.html.erb
→ update.html.erb
→ уничтожить.html.erb
А в config/routes.rb это выглядит так
Rails.application.routes.draw do get 'employees/index' get 'employees/new' get 'employees/create' get 'employees/show' get 'employees/edit' get 'employees/update' get 'employees/destroy' end
Запустите сервер rails с помощью rails s и перейдите по адресу http://localhost:3000/ в вашем браузере. это будет выглядеть,
введите http://localhost:3000/employees/index в адресной строке, чтобы перейти на индексную страницу. это будет выглядеть
СОЗДАТЬ CRUD
Итак, теперь, когда наша модель, представление и контроллер сгенерированы, мы можем написать код для CRUD внутри этих файлов.
Прежде чем писать действия контроллера, нам нужно сначала изменить маршруты, следовательно, изменить отдельные маршруты получения в один единственный ресурс и добавить страницу индекса в качестве корневой страницы.
config/routes.rb
Rails.application.routes.draw do resources :employees root "employees#index" end
Давайте теперь перейдем к контроллеру и напишем следующий код:
employees_controller.rb
class EmployeesController < ApplicationController
before_action :set_employee_params, only: %i[show edit update destroy]
def index
@employees = Employee.all
end
def new
@employee = Employee.new
end
def create
@employee = Employee.create(employee_params)
if @employee.valid?
flash[:errors] = 'Employee Created Successfully'
redirect_to employees_path
else
flash[:errors] = @employee.errors.full_messages
render :new
end
end
def show; end
def edit; end
def update
if @employee.update(employee_params)
flash[:errors] = 'Employee Updated Successfully'
redirect_to employee_path(@employee)
else
flash[:errors] = @employee.errors.full_messages
redirect_to edit_employee_path
end
end
def destroy
if @employee.delete
flash[:errors] = 'Employee Deleted Successfully'
redirect_to root_path(@employee)
else
flash[:errors] = @employee.errors.full_messages
redirect_to destroy_employee_path
end
end
private
def set_employee_params
@employee = Employee.find(params[:id])
end
def employee_params
params.require(:employee).permit(:employee_name, :gender, { hobbies: [] })
end
end
Теперь давайте изменим файлы представления.
Я собираюсь создать CRUD с некоторыми стилями, и я буду использовать для этого Bootstrap.
Добавьте следующий CDN Bootstrap 5 в application.html.erb
<!--Bootstrap CDN --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>EmployeeCrud</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<!--Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<body>
<%= yield %>
</body>
</html>
ПРИМЕЧАНИЕ.Нам не нужно создавать, обновлять или уничтожать файлы erb. Поскольку создание — это то же самое, что и новое, обновление — это то же самое, что и редактирование, а уничтожение запускается напрямую с помощью метода, определенного в контроллере. Поэтому вы можете удалить его.
index.html.erb
<div class="flex-column" style = "height: auto;">
<h1> Employees </h1>
<!--Error Message-->
<% if flash[:errors] %>
<% flash.each do |name,message| %>
<p class="text-danger"><%= message%></p>
<% end %>
<% end %>
<!-- Employee Table -->
<div>
<table class="table table-info table-striped">
<ol class="fs-2">
<thead class="table-secondary">
<td class="text-center"> Id </td>
<td class="text-center"> Name </td>
<td class="text-center"> Hobbies </td>
<td colspan=3 class="text-center"> Action </td>
</thead>
<% @employees.each do |e| %>
<tr>
<td class="text-center"> <%= e.id %> </td>
<td class="text-center"> <%= link_to e.employee_name, employee_path(e) %> </td>
<td class="text-center"> <%= e.hobbies %> </td>
<td class="text-center"><%= button_to "Show",employee_path(e),method: :get, class:"btn-success border-0 rounded-pill shadow px-3 py-2" %></td>
<td class="text-center"><%= button_to "Edit",edit_employee_path(e),method: :get, class:"btn-primary border-0 rounded-pill shadow px-3 py-2" %></td>
<td class="text-center"><%= button_to "Delete",employee_path(e),method: :delete, class:"btn-danger border-0 rounded-pill shadow px-3 py-2" %></td>
</tr>
<% end %>
</ol>
</table>
</div>
<div class="d-flex">
<%= button_to "Add New Employee", new_employee_path, method: :get ,class:"btn-warning border-0 rounded-pill shadow p-3 m-3" %>
</div>
</div>
новый.html.erb
<div class="flex-column">
<div class="card shadow" style="width: 36rem;">
<div class="card-header">
<h2 class="text-center">Employee Form</h2>
</div>
<div class="card-body">
<!--Error Message-->
<% if flash[:errors] %>
<% flash[:errors].each do |error| %>
<p class="text-danger"><%= error %></p>
<% end %>
<% end %>
<!-- Form Started Here -->
<%= form_with model: @employee do |f| %>
<%= f.label :employee_name, "Employee Name :", class:"mt-3" %>
<%= f.text_field :employee_name ,placeholder: "Enter Employee's Name",class:"mb-2 form-control" %>
<br>
<!-- Radio Button For Gender -->
<div class="form-group">
<%= f.label "Gender :" %>
<%= f.radio_button :gender, "male" %>
<%= f.label :gender, "Male" %>
<%= f.radio_button :gender, "female" %>
<%= f.label :gender, "Female" %>
</div>
<br>
<!-- Checkbox For Hobbies -->
<div class="form-group">
<%= f.label "Hobbies :" %>
<%= f.check_box :hobbies, { multiple: true },"Reading", false %>
<%= f.label :hobbies, "Reading" %>
<%= f.check_box :hobbies, { multiple: true },"Photography", false %>
<%= f.label :hobbies, "Photography" %>
<%= f.check_box :hobbies, { multiple: true },"Travelling", false %>
<%= f.label :hobbies, "Travelling" %>
</div>
<br>
<%= f.submit "Save Employee", class:"btn-primary border-0 rounded-pill shadow p-3" %>
<% end %>
</div>
</div>
</div>
edit.html.erb
<div class="flex-column">
<div class="card shadow" style="width: 36rem;">
<div class="card-header">
<h2 class="text-center">Employee Form</h2>
</div>
<div class="card-body">
<!--Error Message-->
<% if flash[:errors] %>
<% flash[:errors].each do |error| %>
<p class="text-danger"><%= error %></p>
<% end %>
<% end %>
<!-- Form Started Here -->
<%= form_with model: @employee do |f| %>
<%= f.label :employee_name, "Employee Name :", class:"mt-3" %>
<%= f.text_field :employee_name ,placeholder: "Enter Employee's Name",class:"mb-2 form-control" %>
<br>
<!-- Radio Button For Gender -->
<div class="form-group">
<%= f.label "Gender :" %>
<%= f.radio_button :gender, "male" %>
<%= f.label :gender, "Male" %>
<%= f.radio_button :gender, "female" %>
<%= f.label :gender, "Female" %>
</div>
<br>
<!-- Checkbox For Hobbies -->
<div class="form-group">
<%= f.label "Hobbies :" %>
<%= f.check_box :hobbies, { multiple: true },"Reading", false %>
<%= f.label :hobbies, "Reading" %>
<%= f.check_box :hobbies, { multiple: true },"Photography", false %>
<%= f.label :hobbies, "Photography" %>
<%= f.check_box :hobbies, { multiple: true },"Travelling", false %>
<%= f.label :hobbies, "Travelling" %>
</div>
<br>
<%= f.submit "Save Employee", class:"btn-primary border-0 rounded-pill shadow p-3" %>
<% end %>
</div>
</div>
</div>
Примечание. У нас один и тот же код в new.html.erb и edit.html.erb, поэтому мы будем использовать для этого партиал _form.html.erb и просто визуализировать его. частично в наших файлах. Мы сделаем это после того, как узнаем о Rails Partials в наших следующих статьях.
show.html.erb
<!-- Employee Details Showing -->
<div class="flex-column" style="height:100vh;">
<!--Error Message-->
<% if flash[:errors] %>
<% flash.each do |name,message| %>
<p class="text-danger"><%= message%></p>
<% end %>
<% end %>
<div class="d-flex">
<div class="m-5" >
<div class="card bg-light border-warning shadow">
<div class="card-body">
<div class="card-header">
<h2 class="text-center">Employee's Details</h2>
</div>
<div>
<h2> ➡ ID: <%= @employee.id %> </h2>
<h2> ➡ Name: <%= @employee.employee_name %> </h2>
<h2> ➡ Gender: <%= @employee.gender %> </h2>
<h2> ➡ Hobbies: <%= @employee.hobbies %> </h2>
</div>
<div class="d-flex">
<%= button_to "Edit Employee" , edit_employee_path, method: :get ,class:"btn-success border-0 rounded-pill shadow p-2 m-2" %>
<%= button_to "Delete Employee", employee_path, method: :delete ,class:"btn-danger border-0 rounded-pill shadow p-2 m-2" %>
<%= button_to "View all Employee", employees_path,method: :get ,class:"btn-primary border-0 rounded-pill shadow p-2 m-2" %>
</div>
</div>
</div>
</div>
</div>
</div>
Вот и все. Наш CRUD готов. 🎉 🎉
Теперь просто перейдите по адресу http://localhost:3000/. и наслаждайтесь своим CRUD-приложением.
Скриншоты:
Главная страница
Новая страница
Показать страницу
Редактировать страницу
Кроме того, если вы хотите изменить некоторые стили в своем приложении, вы можете это сделать.
Вам просто нужно создать файл custom.css в папке app/assets/stylesheets и написать свой собственный стиль. Я создаю то же самое и добавляю стили для центрирования div.
пользовательский.css
.set-center {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Использованная литература :
Репозиторий GitHub: https://github.com/rutikkpatel/Employee-CRUD-Rails-7
