Chúng ta cùng thử viết một Web app đơn giản có sử dụng Ajax bằng Ruby on Rails nhé! 😊😊

Trong bài viết mình sẽ nói thẳng vào cách xây dựng ajax luôn nên nếu các bạn chưa nắm được cách viết 1 app CRUD bằng rails thì mình nghĩ đọc sẽ hơi khó hiểu.

Mở đầu

Ajax là gì ?

Ajax là viết tắt của 「Asynchronous Javascript + XML」, vietsub ra là「 Truyền tin không đồng bộ dựa vào JS và XML」. Ưu điểm của “Không đồng bộ” là kể cả khi nó chạy thì cũng không gây cản trở các quá trình khác của hệ thống.

• Truyên tin đồng bộ thì sẽ xử lý tuần tự từng câu lệnh một, xử lý xong câu lệnh này thì mới đến câu lệnh tiếp theo.
• Còn Truyên tin không đồng bộ thì ngược lại, nó sẽ liên tục thực hiện các câu lệnh sau bất chấp câu lệnh hiện tại đã xong hay chưa. Việc này sẽ giúp cho trải nghiệm người dùng mượt mà hơn vì không phải mất thời gian chờ xử lý những câu lệnh dài dòng, tốn thời gian.
  ➤ Chính vì việc xử lý câu lệnh không theo thứ tự này mà việc phát triền các ứng dụng có dùng Ajax cũng sẽ khó và tốn nhiều công sức hơn ^^.
  
  Ví dụ về việc áp dụng Ajax trong thực tế: Chức năng bấm Like và Comment của Facebook, chức năng Thêm vào giỏ hàng của các Shop online…vv..
  Các bạn có thể đọc thêm về Ajax tại đây nha https://www.tutorialspoint.com/ajax/what_is_ajax.htm.

Để sử dụng Ajax thì có nhiều cách khác nhau nhưng phổ biến nhất vẫn là sử dụng Jquery. Ở bài viết này mình cũng sử dụng Jquery để viết các chức năng của Ajax 😚.

Let’s start !

Mình sẽ tạo app chỉ với một chức năng là create, các chức năng khác các bạn cũng có thể làm tương tự.

1. Tạo Controller và model

• Đầu tiên, mình tạo một Rails app mới tên là testapp.
  Mở Terminal và cùng làm như sau:

$ rails new testapp

Đợi chạy xong thì direct địa chỉ đến vị trí app vừa tạo

$ cd testapp

• Tạo controller có tên là posts với trang index

~/testapp$ rails g controller posts index

• Tạo model post với column là title, data type là text

~/testapp$ rails g model post title:text

• Tạo model thì không thể thiếu lệnh migrate.

~/testapp$ rails db:migrate

2. Xây dựng views

• Muốn truy cập được vào trang web thì phải đầu tiên cài đặt routing phải không nào ! ^^
  testapp/config/route.rb

Rails.application.routes.draw do
  resources :posts
  root "posts#index"
end

• Tiếp theo, các bạn hãy truy cập vào file index.html.erb bằng đường dẫn testapp/app/views/post/index.html.erb và thêm vào đoạn code dưới đây.

<h1>Posts#index</h1>
<p>Find me in app/views/posts/index.html.erb</p>

<!-- tạo form để tạo post mới -->
<%= form_for @post, remote: true do |f| %>
	<%= f.text_field :title, class: "input-box" %>
	<%= f.submit %>
<% end %>
<hr>

<!-- Hiển thị posts -->
<div class="box">
<% @posts.each do |post| %>
	<%= render "posts/post", post: post %>   <!-- Với mỗi post ta sẽ truyền giá trị của nó vào partial file -->
<% end %>
</div>

Đoạn code trên mình dùng form_for nên phải có thêm remote: true, nếu các bạn dùng form_with thì không cần thêm remote: true vì trong form_with thì default của remote đã là true rồi. Nếu thay bằng form_with mà bị lỗi thì các bạn hãy thử restart lại server vài lần rồi vào lại xem sao nhé.

Các bạn có thể thay form_for bằng form_with như sau:

<%= form_with model: @post do |f| %>
	<%= f.text_field :title, class: "input-box" %>
	<%= f.submit %>
<% end %>

• Bên trên mình có dùng <%= render "post/post, post: post %> nên bây giờ phải tạo partial file.
  Các bạn vào folder testapp/app/views/post và tạo file mới có tên _post.html.erb. Sau đó thêm vào file đoạn code sau:

<%= post.id %>-
<%= post.title %><br>

3. Xây dựng Controller và template

• Xong phần views rồi thì đến phần controller nào, các bạn sửa file testapp/app/controller/posts_controller.rb như dưới đây.

class PostsController < ApplicationController
  def index
  	@posts = Post.all
  	@post = Post.new
  end

 def create 
    @post = Post.new(post_params)
    respond_to do |format|
      if @post.save
        format.js
      end
    end
  end

  private
  def post_params
  	params.require(:post).permit(:title)
  end
end

• Ở bài viết này, mình dùng Jquery để xây dựng Ajax. Mình sẽ import Jquery bằng cách thêm CDN của Jquery vào phần <head> của file testapp/app/views/layout/application.html.erb.

<!DOCTYPE html>
<html>
  <head>
    <title>Testapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

• Bước cuối cùng là tạo tempate.
  
  Tong controller ta vừa tạo hàm def create nên ta cũng cần phải tạo một template cho create ở phần views. Tuy nhiên vì ta muốn sử dụng Ajax nên template của ta không phải là create.html.erb mà là create.js.erb.
  Vào folder testapp/app/views/posts và tạo file mới có tên create.js.erb. Sau đó thêm vào file đoạn code sau.

$('.box').append("<%= j render @post %>");
$('.input-box').val("");

Câu lệnh <%= j render @post %> là cách viết tắt của <%= escape_javascript(render @post) %>. Nó giúp lệnh render của chúng ta tránh bị lỗi ký tự khi render file partial. Các bạn có thể đọc thêm về escape_javascript ở đây
https://stackoverflow.com/questions/1620113/why-escape-javascript-before-rendering-a-partial Hoặc ở đây
https://apidock.com/rails/ActionView/Helpers/JavaScriptHelper/escape_javascript
$('.input-box').val(""); sẽ làm trắng khung input trong form sau khi ta tạo post thành công.

Hoàn thành

---

Vậy là chúng ta đã viết xong một app Ajax đơn giản bằng Jquery và Rails. Cùng vào localhost và xem thành quả nào !

Như vậy, nhờ có Ajax mà chúng ta có tạo post mới và xem danh sách những post đã tạo mà không cần phải reload lại trang. 😁😁

Tổng kết

Trên đây là những bước siêu cơ bản để tạo một app Ajax bằng rails. Ngoài tính năng create như trên, mọi người cũng có thể làm tương tự với các tính năng khác như update, edit hay destroy.
Mình cũng đang tự học Rails thôi nên mong mọi người cùng đọc và góp ý nha 😋.