Số 10, Ngõ 12, Khuất Duy Tiến, Nhân Chính, Thanh Xuân, TP Hà Nội
096 803 1388

Hướng dẫn cài đặt gem simple form trong Ruby on Rails

1.Tại sao nên sử dụng simple form?
Simple form với mục đích chính là để tạo ra các form đơn giản giúp cho việc xử lý giao diện trở nên linh hoạt hơn với nền tảng là bootstrap. Chúng ta không cần mất thời gian vào việc định hình bố cục, tất cả đã có simple form giúp ta có cái nhìn phù hợp với mắt thẩm mỹ hơn.

 2.Cách cài đặt và cấu hình gem simple form.

Bước 1: Tạo project nếu bạn chưa có (nếu đã có project rồi thì sang bước 2)

Chúng ta vào cửa sổ dòng lệnh nơi mà thư mục bạn muốn tạo project và gõ dòng lệnh sau để tạo mới 1 project. Ở đây mình để ở Desktop nên sẽ có câu lệnh sau:

screenshot_4

Sau khi tạo xong ở cửa sổ dòng lệnh sẽ xuất hiện 1 loạt các file được tạo mới đó chính là các file trong cấu trúc của 1 project

hinh2

Bước 2: Cài đặt gem simple form
Chúng ta đầu tiên sẽ mở thư mục project vừa mới tạo xong bằng Ruby Mine hoặc bất kỳ IDE nào(Visual Studio Code, Sublime Text,…) và truy cập đến thư mục Gemfile

hinh3

Sau đó thêm dòng code sau vào thư mục Gemfile:

hinh4
Tiếp theo ta vào lại cửa sổ dòng lệnh và gõ lệnh sau để di chuyển đến thư mục project ta vừa tạo ban đầu

hinh5

Và tiến hành dùng câu lệnh sau để download gem simple form về

hinh6

Tiếp đến chúng ta chạy câu lệnh sau để sinh ra các file cấu hình simple form

hinh7

Và sinh ra được các file như trên hình, sau đó ta sẽ tiếp tục tích hợp thêm bootstrap:

hinh8

Trước khi có thể sử dụng simple form với các class của bootstrap chúng ta cũng đừng quên tích hợp bootstrap vào nhé! Nếu chưa có boostrap các bạn có thể truy cập vào http://getbootstrap.com để download về.
Về cơ bản thì mình đã hướng dẫn cho các bạn cách để cài đặt được simple form
Để thuận tiện hơn cho việc tạo mới giao diện có sẵn simple form ta vừa cài đặt và các controller, model ta có thể sử dụng câu lệnh sau:

hinh9

Ở đây mình tạo mới 1 student với các thuộc tính như trên, sau đó nó sẽ tự động sinh ra cho mình các file. Các bạn chỉ cần vào thư mục student/_form.html.erb là sẽ thấy simple form đã tự động được sinh ra rồi đó ^^

hinh10

Trước đó thì bạn phải nhớ cấu hình ở database.yml và chạy 2 câu lệnh dưới đây để có thể thêm bảng vừa mới tạo vào được trên localhost phpmyadmin
• rake db:create
• rake db:migrate
Và bây giờ bạn vào chạy server gõ dòng lệnh : rails s, sau đó vào thẳng đường dẫn http://localhost:3000/students/new là sẽ chiêm ngưỡng được thành quả! Nếu vẫn thấy form ở định dạng ban đầu thì có lẽ bạn đã quên tích hợp bootstrap vào, bạn có thể tham khảo ở bài cài đặt bootstrap nha!

Dưới đây là 1 số hình ảnh của simple form

hinh11

hinh13

Chi tiết về cách sử dụng các bạn có thể tham khảo thêm tại đây: https://github.com/plataformatec/simple_form
Author: Thành PV

Để lại phản hồi