Ajax cơ bản trong ứng dụng Rails
Đầu tiên, các bạn tạo ra project bằng câu lệnh: rails new myapp cd myapp Sau đó thêm gem vào file Gemfile và chạy lệnh bundle install: gem 'bootstrap-sass' Sau đó tạo file custom.scss trong thư mực app/assets/stylesheets/custom.scss: @import "bootstrap-sprockets"; @import "bootstrap"; ...
Đầu tiên, các bạn tạo ra project bằng câu lệnh:
rails new myapp cd myapp
Sau đó thêm gem vào file Gemfile và chạy lệnh bundle install:
gem 'bootstrap-sass'
Sau đó tạo file custom.scss trong thư mực app/assets/stylesheets/custom.scss:
@import "bootstrap-sprockets"; @import "bootstrap";
Tiếp theo, ta thêm vào app/assets/javascripts/application.js:
//= require bootstrap
Bây giờ chúng ta sẽ tạo ra model tên là Product:
rails g resource Product name price:decimal rake db:migrate
Chúng ta đã có cơ sở dữ liệu, và bây giờ sẽ tạo thêm dữ liệu từ file seeds và chay lệnh rake db:seed:
Product.delete_all Product.create!([ {id: 1, name: "Nintendo Wii U Premium", price: 250}, {id: 2, name: "XBox 360 250GB", price: 250}, {id: 3, name: "Playstation 3 500 GB", price: 239.95}, {id: 4, name: "Nintendo Wii", price: 99.95}, {id: 5, name: "Nintendo 3DS", price: 174.95} ])
Trong file app/controllers/products_controller.rb, ta thêm các hàm CRUD:
class ProductsController < ApplicationController def index @products = Product.all end def show @product = Product.find(params[:id]) end def new @product = Product.new end def create @products = Product.all @product = Product.create(product_params) end def edit @product = Product.find(params[:id]) end def update @products = Product.all @product = Product.find(params[:id]) @product.update_attributes(product_params) end def delete @product = Product.find(params[:product_id]) end def destroy @products = Product.all @product = Product.find(params[:id]) @product.destroy end private def product_params params.require(:product).permit(:name, :price) end end
Đồng thời cấu hình lại file route:
resources :products do get "delete" end root to: "products#index"
Ta tạo file app/views/products/index.html.erb:
<div class="container"> <div class="well"> <%= link_to "New Product", new_product_path, remote: true, class: "btn btn-primary" %> </div> <div class="new-product"></div> <table class="table table-bordered table-striped"> <thead> <tr> <th>Name</th> <th>Price</th> <td> </td> <td> </td> </tr> </thead> <tbody class="product-index"> <%= render "index" %> </tbody> </table> </div> <div id="product-modal" class="modal fade"></div>
Bây giờ chúng ta cần tạo thêm _index.html.erb:
<% @products.each do |product| %> <tr> <td><%= product.name %></td> <td><%= number_to_currency product.price %></td> <td><%= link_to "Edit", edit_product_path(product), remote: true, class: "btn btn-default" %></td> <td><%= link_to "Delete", product_delete_path(product), remote: true, class: "btn btn-danger" %></td> </tr> <% end %>
Sau đó ta tạo fom dùng cho cho việc tạo mới và chỉnh sửa product:
app/views/products/_form.html.erb: <div class="modal-dialog"> <div class="modal-content"> <%= form_for @product, remote: true, html: { style: "display:inline;" } do |f| %> <div class="modal-body"> <ul class="errors"></ul> <div class="form-group"> <%= f.label :name, class:"control-label" %> <%= f.text_field :name, class: "form-control" %> </div> <div class="form-group"> <%= f.label :price, class: "control-label" %> <%= f.text_field :price, class: "form-control" %> </div> </div> <div class="modal-footer"> <%= f.submit class: "btn btn-primary" %> <%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %> </div> <% end %> </div> </div>
Tiếp theo, ta tạo file _new.html.rb file và _edit.html.erb:
app/views/products/_new.html.erb: <div class="modal-header"> <h3>New Product</h3> </div> <%= render "form" %>
app/views/products/_edit.html.erb: <div class="modal-header"> <h3><%= "Editing #{@product.name}" %></h3> </div> <%= render "form" %>
Ở đây chúng ta cần dùng javascript để hiển thị được form:
app/views/products/new.js.erb: $("#product-modal").html("<%= escape_javascript(render 'new') %>") $("#product-modal").modal("show")
app/views/products/edit.js.erb: $("#product-modal").html("<%= escape_javascript(render 'edit') %>") $("#product-modal").modal("show")
Để lưu lại product mới hoặc product sau khi chỉnh sửa, ta tạo thêm 3 file:
app/views/products/_save.js.erb: $("ul.errors").html("") <% if @product.errors.any? %> <% @product.errors.full_messages.each do |message| %> $("ul.errors").append($("<li />").html("<%= message.html_safe %>")) <% end %> <% else %> $(".product-index").html("<%= escape_javascript(render 'index') %>") $("#product-modal").modal("hide") <% end %>
app/views/products/create.js.erb <%= render "save" %>
app/views/products/update.js.erb: <%= render "save" %>
Cuối cùng, muốn xóa product ta tạo file app/views/products/_delete.html.erb:
<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3>Delete Product</h3> </div> <div class="modal-body"> <ul class="errors"></ul> Are you sure you wish to delete <b><%= @product.name %></b>? </div> <div class="modal-footer"> <%= link_to "Yes, Delete This Product", product_path(@product), method: :delete, remote: true, class: "btn btn-danger" %> <%= link_to "No, Please Don't", "#", class: "btn btn-default", data: { dismiss: "modal" } %> </div> </div> </div>
app/views/products/delete.js.erb: $("#product-modal").html("<%= escape_javascript(render 'delete') %>") $("#product-modal").modal("show")
app/views/products/destroy.js.erb: <%= render "save" %>
Bây giờ bạn có thể chạy lệnh rails s để xem thành quả của mình