[RoR] Xây dựng website bằng Ruby on Rails – Phần 1
Xin chào các bạn!
Trong những bài viết trước liên quan đến Ruby on Rails (RoR) mình đã hướng dẫn các bạn cài đặt RoR trên các hệ điều hành phổ biến rồi. Hôm nay mình sẽ bắt đầu hướng dẫn các bạn tạo một website mới bằng Ruby on Rails, chạy cơ sở dữ liệu là MySQL lần lượt từ căn bản và nâng cao dần lên.
Bạn nào chưa biết cách cài đặt thì có thể xem lại các bài viết trước của mình, vì bắt buộc các bạn phải cài đặt được RoR lên máy thì mới có thể lập trình được.
- [Ruby] Hướng dẫn cài đặt Ruby on Rails trên Mac OS X 10.9 Mavericks
- [Ruby] Hướng dẫn cài đặt Ruby on Rails trên Centos 6
Bài toán cụ thể là mình muốn làm một trang cho phép đăng ký tài khoản, sau đó đăng nhập, tìm kiếm….như hình dưới đây:
1- Giao diện website sẽ làm bằng Ruby on Rails
Đầu tiên chúng ta sẽ tạo ra một dự án RoR bằng lệnh, các bạn có thể đặt thư mục cho dự án ở đâu đó tùy thích. Do mình đang dùng hệ điều hành Mac OS nên bài viết mình sẽ thực hiện trên Mac luôn.
– Bước 1: Mở Terminal, chuyển đến thư mục /Users/thanhtv/RubyOnRails/. Trên máy các bạn thì có thể sẽ khác đường dẫn.
cd /Users/thanhtv/RubyOnRails/
– Bước 2: Tạo dự án RoR mới bằng lệnh trên Terminal luôn
Trans-iMac:Desktop thanhtv$ rails new DemoRoR
create
create README.rdoc
create Rakefile
create config.ru
create .gitignore
create Gemfile
create app
create app/assets/javascripts/application.js
create app/assets/stylesheets/application.css
create app/controllers/application_controller.rb
create app/helpers/application_helper.rb
create app/views/layouts/application.html.erb
create app/assets/images/.keep
create app/mailers/.keep
create app/models/.keep
create app/controllers/concerns/.keep
create app/models/concerns/.keep
create bin
Ở đây ví dụ mình tạo ra một dự án có tên là DemoRoR. Ở đây nếu gõ lệnh mặc định như trên, dự án của chúng ta sẽ sử dụng hệ quản trị cơ sở dữ liệu là sqlite, do vậy nếu bạn muốn sử dụng MySQL thay cho sqlite thì bạn có thể sửa lại lệnh trên như sau
rails new DemoRoR -d mysql
Khi đó bạn sẽ thấy file /config/database.yml của dự án sẽ được chuyển sang cấu hình kết nối đến mysql như sau:
2- Cấu hình Rails với MySQL
– Bước 3: Sau bước trên, chúng ta đã có một dự án với cấu trúc các thư mục như hình 2 trên. Về ý nghĩa và chức năng của từng thư mục các bạn có thể tham khảo thêm trên internet, nhưng tóm lại ở giai đoạn đầu này chúng ta chỉ cần quan tâm đến các thư mục chính sau:
app: Là thư mục chứa toàn bộ phần code chính của bạn, bao gồm: Controller, Model, Views và các assets( thư viện ảnh, js, css)
config: Là nơi cấu hình dự án, kết nối database, routes…
Giờ ta cứ chạy thử xem dự án thế nào đã. Các bạn cd vào thư mục của dự án và chạy Rails server lên
cd /Users/thanhtv/RubyOnRails/DemoRoR
Sau đó gõ tiếp lệnh để chạy rails server:
rails server
Tiếp theo mở trình duyệt và gõ thử: http://localhost:3000 xem sao. Nếu các bạn thấy như hình dưới là lỗi do chúng ta chưa tạo database cho dự án.
3- Lỗi chưa tạo database cho dự án Ruby on Rails
– Bước 4: Tạo database cho dự án
Các bạn gõ lệnh tạo database như sau
rake db:create db:migrate
Nếu chạy lệnh không thấy báo lỗi gì là bạn đã tạo DB thành công, còn các cảnh bảo warning thì không cần để ý lắm nếu nó không quá quan trọng. Những lỗi có thể xảy ra ở đây là bạn chưa cài MySQL, lỗi quyền truy cập MySQL…
Để chắc chắn thì các bạn có thể kiểm tra xem database đã được tạo chưa bằng cách gõ lệnh:
mysql -u”username” -p”password”
Sau đó gõ tiếp “show databases” để xem danh sách các DB đã được tạo. Như hình dưới là bạn thấy DB của dự án DemoRoR đã được tạo thành công.
4- Kiểm tra database đã được tạo hay chưa
Bây giờ các bạn refresh lại trình duyệt: http://localhost:3000 nếu thấy màn hình hiện ra chữ “Welcome aboard You’re riding Ruby on Rails!” là mọi chuyện đến bước này đều ổn.
– Bước 5: Tạo mới một Controller
Mình sẽ tạo một Controller mới và đặt mặc định khi chạy website là vào Controller này
rails generate controller home index
Bạn sẽ thấy màn hình trong Terminal báo như sau
create app/controllers/home_controller.rb
invoke erb
create app/views/home
invoke test_unit
create test/controllers/home_controller_test.rb
invoke helper
create app/helpers/home_helper.rb
invoke test_unit
create test/helpers/home_helper_test.rb
invoke assets
invoke coffee
create app/assets/javascripts/home.js.coffee
invoke scss
create app/assets/stylesheets/home.css.scss
Bước tiếp theo ta sửa file cấu hình config/routes.rb cho root routes là root ‘home#index’
5- Sửa cấu hình root routes trong Ruby on Rails
Bây giờ nếu bạn chạy website ngay, nó sẽ báo lỗi thiếu file index.html.erb ở tầng View của Home Controller. Để sửa lỗi này chúng ta chỉ cần tạo mới thêm một file ở /View/Home/index.html.erb là xong.
Và vì HomeController cũng là controller mặc định khi bắt đầu chạy website, nên mình cũng sẽ tạo giao diện HTML như mong muốn trong hình số 1 vào luôn trong /View/Home/index.html.erb.
6- Tạo mã HTML cho trang index của HomeController
Còn các Stylesheet và Javascript mình sẽ code tương ứng vào các file trong
assets/stylesheets/home.css.scss
và assets/javascript/home.js.coffee
Lúc này nếu bạn chạy lại website, bạn sẽ nhìn thấy giao diện đúng như những gì bài toán đặt ra. Còn phần xử lý code chi tiết hơn ở đăng ký (Sign up), validates dữ liệu, đăng nhập (Login) mình sẽ hướng dẫn các bạn trong những bài viết sau!
Bạn nào muốn lấy source code của bài này để tham khảo thì có thể DOWNLOAD TẠI ĐÂY.
-
http://websgle.com/
Bài đăng
0 nhận xét:
Đăng nhận xét