Tạo Bookshelf app với Lotus Framework (Phần 2)

Phần 1 mình đã giới thiệu sơ lược về cách khởi động Bookshelf app với Lotus. Bài lần này sẽ tiếp tục với Layout cho Bookshelf nha

Dựa vào layout bên trên, có thể thấy là có 8 quyển sách được tạo ra, theo nguyên tắc cấu trúc HTML của 8 quyển sách là như nhau. Nó chỉ khác về nội dung.
vì vậy HTML template cho sách sẽ là một template sử dụng chung cho tất cả.

Template để hiển thị sách:

<div class="row">
         
        <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://it-ebooks.org/img/books/wrox/professional_php6.jpg" alt="lotus bookshelf">
          </a>
        </div>
         

         
        <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://it-ebooks.org/img/books/wrox/professional_php7.jpg" alt="lotus bookshelf">
          </a>
        </div>
         
        .
        .   
        .
  </div>

Đó, các bạn đã thấy được template để hiển thị 1 quyển sách là:

<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="http://it-ebooks.org/img/books/wrox/professional_php6.jpg" alt="lotus bookshelf">
    </a>
</div>

Ta cũng thấy được image_urlthay đổi phụ thuộc vào mỗi quyển sách khác nhau. Vì vậy chúng ta cần phải bind data từ books collection cho attribute image_url

Render sách với data

Chúng ta 1 books collection gồm 8 quyển sách.

  books = [
    {
      image_url: 'http://it-ebooks.org/img/books/wrox/professional_php6.jpg',
      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    },
    {
      image_url: 'http://it-ebooks.org/img/books/wrox/professional_php7.jpg',
      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    },
    .
    .
    .
]

Làm cách nào để hiển thị 8 quyển sách này?

Lotus view hỗ trợ tất cả các method của Ruby nên cách để render books collection cũng khá là đơn giản

• Để có được data của một quyển sách trong books collection chúng ta phải cho nó qua vòng lặp each.
• Get data cho image_url

<% books.each do |book|%>
  <div class="col-sm-6 col-md-3">
  <a href="#" class="thumbnail">
    <img src="<%= book.image_url %>" alt="lotus bookshelf">
  </a>
  </div>
<% end %>

Làm thế nào để có được books collection ??? Bài viết tiếp theo mình sẽ giới thiệu tiếp.

Kết luận

Để tránh việc làm các bạn rối nên mình sẽ chia bài viết thành từng phần nhỏ và chỉ ra một cách cụ thể hơn.
Bài viết tiếp theo mình sẽ viết cụ thể về cách tạo data, và cách get data

Các bạn có thể xem code tại đây: https://github.com/mymai91/bookshelf/tree/create-template

Hy vọng qua bài này có thể chia sẽ được với các bạn rõ hơn về Lotus