Chương 4.Ứng dụng đầu tiên

4.1. Triển khai chạy trên Internet sử dụng Heroku

4.1.1. Giới thiệu

Heroku là một nền tảng đám mây (cloud platform) giúp xây dựng và triển khai các ứng dụng web. Nó được mô tả là “cách nhanh nhất để đi từ ý tưởng đến URL, bỏ qua mọi rắc rối về vấn đề cơ sở hạ tầng. Bạn chỉ việc tập trung vào ứng dụng của bạn”.

4.1.2. Cài đặt và sử dụng

Heroku đã hướng dẫn khá kĩ tại đây:
https://devcenter.heroku.com/articles/getting-started-with-ruby#introduction
Thực hiện theo hướng dẫn, và sửa lỗi phát sinh thông qua google

4.2. Giao diện

4.2.1. Giới thiệu Bootstrap

Đây là một front end framework phổ biến nhất hiện nay. Nó bóng bẩy, trực quan, mạnh mẽ và là front end framework đầu tiên hướng tới điện thoại di động. Nó sử dụng HTML, CSS và JavaScript để làm trang web của bạn trong đẹp hơn.

Lợi ích khi sử dụng Bootstrap:

Tiếp cận theo hướng di động đầu tiên.
Hỗ trợ tất cả các trình duyệt web phổ biến như Chrome, Fire Fox, Opera, Internet Explorer, Safari
Bootstrap dễ học : Chỉ với kiến thức HTML và CSS là bạn có thể bắt đầu với Bootstrap.
Responsive design : Cách thiết kế này giúp trang web của bạn điều chỉnh giao diện cho máy tính, máy tính bảng và thiết bị di động.
Đây được coi như là tiêu chuẩn ngầm giữa các nhà phát triển.
Có thể tùy chỉnh.

4.2.2. Cài đặt Bootstrap với Rails

Các bước cài đặt:

Mở file Gem trong ứng dụng

Thêm 2 gem bootstrap-sass và sass-rails vào file Gem.

  gem ‘bootstrap-sass’, ‘~>3.3.5’
  gem ‘sass-rails’ , ‘>= 3.2’

chạy lệnh : bundle install
Import Bootstrap CSS assets : thêm 2 dòng dưới vào đầu file app/assets/stylesheets/application.scss
```
  @import "bootstrap-sprockets";
  @import "bootstrap";
```
Import Bootstrap javascript assets : thêm dòng dưới vào file app/assets/javascripts/application.js
```
  //= require bootstrap-sprockets
```
Vào sau dòng
```
  //= require jquery
```

4.3.1. Xây dựng mô hình dữ liệu User cho chức năng đăng ký

Mỗi người dùng có 1 định danh duy nhất được xác định bởi id
Một tên gọi Name (thuộc kiểu String)
Một địa chỉ Email (thuộc kiểu String)

*Mô hình dữ liệu User cho chức năng đăng ký:

Hình 4.1 Model đồ dữ liệu User

Lệnh cài đặt dữ liệu

   $ rails generate scaffold User name:string email:string
   $ rake db:migrate

Khởi động server:
```
   $ rails server
```

4.3.2. Xây dựng ứng dụng theo mô hình MVC

Mô hình MVC cho 1 ứng dụng Ruby on Rails

Figure 2.Model MVC Ruby on Rails
Tại View:

Xây dựng form biểu cho phép người dùng nhập thông tin đăng ký: Hiển thị thông tin User khi đăng ký thành công
Tại Controller:
- Xây dựng Controller cho phép thêm người dùng vào hệ thống:
- Điều hướng config -> routes

c. Giao diện ứng dụng chức năng đăng ký

*Figure 3.Home page*

Click Sign up:

Figure 4.Sign up interface

4.4.1. Code

Chúng ta tạo chức năng login và logout: gõ lệnh rails g controller Sessions new create destroy . Sauk hi gõ lệnh trên thì tự động rails sẽ sinh code cho chúng ta bao gồm router, controller, view, model và chúng ta sẽ viết code cho các phần này Chức năng login:

Route: gồm get ‘login’ và post ‘login’
Controller: (sessions_controller.rb) Ở đây phần code xử lý cho chức năng đăng nhập là create, chúng ta sẽ lấy dữ liệu từ form gửi lên bao gồm username, password và so sánh dữ liệu này với dữ liệu trong CSDL nếu trùng nhau sẽ đẩy người dùng vào trang quản lý users nếu không chính xác sẽ trả về dòng thông báo lỗi 'Username or Password is not correct !'
View: (new.html.erb)

Chức năng Logout

Khi người dùng muốn logout khỏi hệ thống, hõ sẽ click chọn nút logout để đăng xuất. Lúc trước khi người dùng đăng nhập chúng ta đã tạo một biến sessions để lưu username của người dùng và hiển thị nó trên phần header bây giờ khi đăng xuất chúng ta sẽ hủy session này đi và sẽ hiển thị lại nút login để đăng nhập

Xử lý đăng xuất:
Code header(layouts/application.html.erb):

4.4.2 Giao diện

Trang chủ:
Trang login:
Trang users:
```
 ![](user.png)
```
Logout: