Questions Management – Frontend – Sử dụng SB Admin 2 Bootstrap Theme

Để việc quản lý các câu hỏi thật hiệu quả, chúng ta cần xây dựng một trang quản lý có đầy đủ tính năng giúp chúng ta có thể quản lý toàn bộ ứng dụng từ việc thêm, xoá, sửa các câu hỏi, category cho đến việc quản lý người dùng, các thông tin mới mà người dùng cập nhập.

Lúc đầu, mình nghĩ sẽ xây dựng toàn bộ giao diện ngay từ đầu, qua đó có thể giúp các bạn có cái nhìn chi tiết về cách mà chúng ta phát triển giao diện như thế nào. Nhưng nghĩ lại việc làm như thế sẽ mất rất nhiều thời gian từ việc thiết kế giao diện cho đến việc chuyển đổi nó qua HTML nên mình muốn giảm bớt thời gian một chút. Đó là lý do tại sao mình phải đi tìm những theme sẵn có, free trên mạng.

Cũng may là mình đã tìm được một giao diện ưng ý sử dụng Bootstrap 3, responsive có tên là SB Admin 2 https://startbootstrap.com/template-overviews/sb-admin-2/. Thật ra theme này cũng có phiên bản sử dụng Bootstrap 4, tên là SB Admin 4, là phiên bản mới nhất của Bootstrap nhưng giao diện của SB Admin 4 mình không ưng ý lắm nên mình quyết định sử dụng theme SB Admin 2 luôn. Giao diện của theme này như sau:

Questions Management - Frontend - Sử dụng SB Admin 2 Bootstrap Theme

Để sử dụng SB Admin 2 trong ứng dụng Questions Management của chúng ta, đầu tiên mình sẽ thử apply trang index.html của theme này vào ứng dụng Angular của chúng ta trước. Nếu các bạn download source code của theme này, các bạn có thể xem nội dung của trang index.html trong thư mục pages của nó:

Questions Management - Frontend - Sử dụng SB Admin 2 Bootstrap Theme

Để apply giao diện trang index.html của theme SB Admin 2, có những việc sau mình phải làm:



Thứ nhất là về phần JavaScript.

Hiện tại theme SB Admin 2 đang sử dụng 5 thư viện JavaScript với version như sau:

  • Bootstrap version 3.3.7
  • JQuery version 3.1.0
  • Metismenu version 1.1.3
  • Morris.js version 0.5.0
  • Raphael version 2.2.0.

và có thêm phần custom JavaScript của chính nó nữa.

Các bạn có thể xem các thẻ <script> trong tập tin index.html và nội dung của từng thư viện JavaScript để thấy rõ hơn điều này:

Để install các thư viện này vào phần frontend, các bạn có thể chạy những câu lệnh sau:

trong thư mục frontend của ứng dụng Questions Management của chúng ta.

Lúc này, nếu các bạn kiểm tra lại tập tin package.json trong thư mục frontend, các bạn sẽ thấy phần dependencies sẽ có nội dung như sau:

Phần Morris Charts JavaScript, chúng ta còn có một tập tin là morris-data.js. Mình sẽ copy tập tin này trong thư mục data của theme rồi bỏ vào thư mục src/assets/js của project ứng dụng chúng ta.

Ở đây chúng ta còn có 2 file custom JavaScript cho theme SB Admin 2 nằm trong thư mục dist/js của theme, mình cũng sẽ copy chúng để bỏ vào thư mục src/assets/js luôn.

Questions Management - Frontend - Sử dụng SB Admin 2 Bootstrap Theme

Để sử dụng các tập tin jquery.min.js, bootstrap.min.js, metisMenu.min.js, raphael.min.js, morris.min.js, sb-admin-2.min.js, morris-data.js trong ứng dụng của chúng ta, mình sẽ khai báo chúng trong tập tin angular.json phần scripts như sau:




Kế tiếp đến là phần CSS.

Phần CSS thì theme SB Admin 2 đang sử dụng CSS của 4 thư viện bao gồm:

  • Bootstrap version 3.3.7
  • Metismenu version 1.1.3
  • Morris.js version 0.5.0
  • Font-awesome version 4.6.3

và một tập tin style CSS riêng của theme.

Các thư viện Bootstrap, Metismenu, Morris.js mình đã install ở trên rồi, bây giờ, mình chỉ cần install thư viện Font-awesome nữa mà thôi:

Tập tin style CSS riêng của theme mình sẽ copy từ thư mục dist/css của theme rồi bỏ vào thư mục src/assets/css.

Questions Management - Frontend - Sử dụng SB Admin 2 Bootstrap Theme

Để sử dụng các tập tin bootstrap.min.css, metisMenu.min.css, font-awesome.min.css, morris.css, mình sẽ khai báo chúng trong tập tin style.css nằm trong thư mục src như sau:

còn tập tin sb-admin-2.min.css mình sẽ khai báo nó trong tập tin angular.json phần styles như sau:




Phần kế tiếp nữa là chúng ta cần thay thế nội dung của tập tin app.component.html trong thư mục src/app bằng nội dung trong phần body của tập tin index.html của theme SB Admin 2.

Vì nội dung của phần body trong tập tin index.html của theme SB Admin 2 rất dài nên mình ko tiện đề cập ở đây các bạn nhé. Nhưng có một cái mà mình sẽ thay đổi sau khi thay thế nội dung đó là mình sẽ thay đổi đoạn code HTML sau:

thành:




Phần cuối cùng mà mình muốn làm là chỉnh sửa một xí về tên của ứng dụng Questions Management trong tập tin index.html từ QuestionsManagement thành “Questions Management”.

Để làm điều này, các bạn chỉnh sửa thẻ <title> từ <title>QuestionsManagement</title> thành <title>Questions Management</title> là được.

OK, đến đây là chúng ta đã hoàn thành việc sử dụng theme SB Admin 2 vào ứng dụng Questions Management của chúng ta.

Nếu bây giờ, các bạn chạy lại ứng dụng với “ng serve” thì sẽ thấy kết quả như sau:

Questions Management - Frontend - Sử dụng SB Admin 2 Bootstrap Theme

Chia sẽ bài viết này ...Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

2 thoughts on “Questions Management – Frontend – Sử dụng SB Admin 2 Bootstrap Theme

  1. Avatar

    hay quá anh ơi, em công nhận anh cũng công phu thật, có quá nhiều bước mà anh làm rất chi tiết , nhờ vậy mà em có cái nhìn tổng quan về cấu trúc của một web thế nào từ back end đến frontend. cảm ơn anh rất rất nhiều

Add Comment