CSN NguyenDucThinh EmberJs Final

Tìm hiểu về EmberJs và thiết kế website bán sách
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
...........................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
Trà Vinh, ngày ….. tháng …… năm ……

Giáo viên hướng dẫn
Trà Vinh,
(Kýngày
tên ….. tháng
và ghi ……
rõ họ năm ……
tên)
Giáo viên hướng dẫn
(Ký tên và ghi rõ họ tên)
Nguyễn Đức Thịnh 1

NHẬN XÉT CỦA THÀNH VIÊN HỘI ĐỒNG
...........................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
.......................................................................................................................
Trà Vinh, ngày ….. tháng …… năm ……

Thành viên hội đồng
(Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN
Đầu tiên, em xin gửi lời cảm ơn chân thành đến cô Phạm Thị Trúc Mai, giảng
viên Bộ môn Công nghệ thông tin của Trường Đại học Trà Vinh, đã tận tình hướng dẫn,
chỉ bảo em trong suốt quá trình thực hiện đồ án cơ sở ngành này.
Do chưa có nhiều kinh nghiệm làm đề tài cũng như còn những hạn chế về kiến
thức, trong quá trình thực hiện đồ án cơ sở ngành chắc chắn sẽ không tránh khỏi những
thiếu sót. Rất mong nhận được sự nhận xét, ý kiến đóng góp từ phía thầy cô để bài đồ án
cơ sở ngành của em được hoàn thiện hơn. Lời sau cùng cho em xin gửi lời cảm ơn đến
quý thầy cô, chúc quý thầy cô thật nhiều sức khỏe, thành công và hạnh phúc.
Sinh viên thực hiện

MỤC LỤC
CHƯƠNG 1 TỔNG QUAN ...........................................................................................9

CHƯƠNG 2 NGHIÊN CỨU LÝ THUYẾT ................................................................ 11
2.1 Cách cài EmberJS ................................................................................................ 11
2.1.1 NodeJS ...........................................................................................................19
2.1.2 Ember CLI .....................................................................................................19
2.1.3 Tạo một app với Ember. ................................................................................19
2.2 Cấu trúc của một thư mục ứng dụng EmberJs .....................................................20
2.3 Các thành phần chính trong EmberJS. .................................................................21
2.3.1 Template ........................................................................................................22
2.3.2 Controller .......................................................................................................23
2.3.3 Routing ..........................................................................................................26
2.3.4 Model .............................................................................................................27
2.3.5 View...............................................................................................................29
2.3.6 Component.....................................................................................................29
2.3.7 Quy tắc đặt tên ............................................................................................... 31
2.4 Điểm mạnh và điểm yếu của EmberJS.................................................................31
2.5 Kết luận ................................................................................................................32
CHƯƠNG 3 HIỆN THỰC HÓA NGHIÊN CỨU .......................................................33
3.1 Mô tả bài toán .......................................................................................................33
3.2 Đặc tả yêu cầu hệ thống .......................................................................................33
3.2.1 Yêu cầu chức năng ........................................................................................33
3.2.2 Yêu cầu phi chức năng ..................................................................................33
3.3 Thiết kế giao diện .................................................................................................34
3.3.1 Giao diện trang chủ........................................................................................34
3.3.2 Giao diện trang sản phẩm ..............................................................................35
3.3.3 Giao diện trang đăng ký. ...............................................................................35
3.3.4 Giao diện trang đăng nhập .............................................................................36
3.3.5 Giao diện trang giỏ hàng ...............................................................................36
CHƯƠNG 4 KẾT QUẢ NGHIÊN CỨU .....................................................................38
4.1 Dữ liệu thử nghiệm ............................................................................................... 38
4.2 Kết quả thử nghiệm .............................................................................................. 38
4.2.1 Chức năng phân loại sản phẩm ......................................................................38

4.2.2 Chức năng tìm kiếm ......................................................................................39

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ..............................................43
DANH MỤC TÀI LIỆU THAM KHẢO ...........................................................................45
PHỤ LỤC........................................................................... Error! Bookmark not defined.

DANH MỤC HÌNH ẢNH – BẢNG BIỂU
Hình 2.1.Mô hình sắp đặt trong EmberJS .........................................................................22

Hình 2.2 Các khớp nối của mẫu, điều khiển và mô hình ...................................................24
Hình 3.1: Trang chủ của web bán sách. ............................................................................34
Hình 4.1Chức năng phân loại sách ...................................................................................39

TÓM TẮT ĐỒ ÁN CƠ SỞ NGÀNH
Vấn đề nghiên cứu
Đồ án này tập trung vào việc nghiên cứu về EmberJS, một JavaScript framework
mạnh mẽ và cách áp dụng nó trong phát triển ứng dụng web hiện nay. Vấn đề cơ bản là
làm thế nào để có thể sử dụng các tính năng của EmberJS làm cho trang web bán sách trở
nên hấp dẫn hơn, tăng cường tính linh hoạt và hiệu suất phát triển.
Hướng tiếp cận
Với vấn đề đặt ra tôi đã lựa chọn một hướng tiếp cận tổng thể bao gồm hai phần
chính: tìm hiểu lý thuyết về EmberJS và áp dụng nó vào thực tế. Đối với phần lý thuyết,
tôi đã nghiên cứu các khái niệm như components, services và routing của EmberJs. Đồng
thời, tôi đã tạo ra dự án mẫu để minh họa cách sử dụng EmberJS trong thực tế.
Cách giải quyết vấn đề
Để giải quyết vấn đề, tôi đã tiến hành một quá trình học tập nghiêm túc, đặt nền
tảng cho việc tìm hiểu rõ về EmberJS. Bằng cách này tôi có thể xác định cách sử dụng
các tính năng của nó để giải quyết những yêu cầu thường gặp trong phát triển ứng dụng
web. Cùng với đó, việc xây dựng và triển khai dự án thực tế giúp tôi kiểm tra và xác nhận
hiệu suất của EmberJS trong thực tế.
Kết quả đạt được
Hiểu rõ hơn về EmberJS: Sau năm tuần thực hiện đồ án, tôi đã hiểu được về cấu
trúc và các khái niệm quan trọng của EmberJS như components, services và routing. Áp
dụng thành công vào dự án của tôi, chứng minh khả năng ứng dụng linh hoạt của
EmberJS trong môi trường phát triển ứng dụng web bán sách.

MỞ ĐẦU
Lý do chọn đề tài
Với một xã hội ngày càng phát triển, Internet đã trở thành một phần không thể
thiếu trong cuộc sống hàng ngày của mỗi chúng ta. Từ đó việc thiết kế giao diện phù hợp
trở nên không kém phần quan trọng trong việc đảm bảo sự thành công của một trang
website.
EmberJS đã trở thành một phần không thể thiếu trong quá trình phát triển web
hiện nay. Lựa chọn đề tài nghiên cứu về EmberJS là kết quả của nhận thức về sức ảnh
hưởng và tầm quan trọng của nó đối với việc xây dựng ứng dụng web hiệu quả. Nó được
ưa chuộng vì tính mạnh mẽ, tích hợp dễ dàng, và khả năng tạo ra trải nghiệm người dùng
tốt. Một số công ty lớn như Google, Netflix, Linkedin, Square, The Guardian, … đã sử
dụng EmberJS để xây dựng và quản lý trang web của họ. Điều này cho thấy tầm quan
trọng và sự phổ biến của EmberJS. Chính vì vậy, tôi quyết định thực hiện đồ án cơ sở
ngành với đề tài “Tìm hiểu về EmberJS và thiết kế ứng dụng website minh họa”.
Mục đích nghiên cứu
Mục đích chính của đồ án này là hiểu rõ các kiến thức cơ bản về các tính năng và
lợi ích của EmberJS, đồng thời áp dụng kiến thức đó vào việc xây dựng các ứng dụng
web thực tế. Tôi mong muốn không chỉ có kiến thức lý thuyết mà còn có khả năng ứng
dụng linh hoạt trong các dự án thực tế.
Đối tượng nghiên cứu
Đối tượng nghiên cứu của tôi là những kiến thức cơ bản và các tính năng quan
trọng của EmberJS, cách để áp dụng kiến thức đó vào việc xây dựng các ứng dụng web
thực tế.
Phạm vi nghiên cứu
Phạm vi nghiên cứu của tôi với đề tài này, tôi tập trung vào việc tìm hiểu về cấu
trúc MVC của EmberJS, các khái niệm như components, routing services và emberdata.

CHƯƠNG 1 TỔNG QUAN

Sự bùng nổ phát triển của các ứng dụng web đang ngày càng phát triển mạnh trong
những năm gần đây. Việc duy trì mã nguồn, quản lý dữ liệu và tương tác người dùng đòi
hỏi một quy trình phát triển hiệu quả và linh hoạt. Trong bối cảnh này, EmberJS nổi lên
như một công cụ mạnh mẽ để giúp giải quyết những thách thức này và mang lại trải
nghiệm người dùng mượt mà.
EmberJS ( có tên thật là SproutCore MVC framework) là một framework mã

nguồn mở JavaScript phía client dùng cho phát triển các ứng dụng web và sử dụng mô
hình Model-View-Controller. Mục tiêu của đồ án này là tìm hiểu về cách EmberJS hoạt
động, cách ứng dụng nó vào quá trình phát triển một trang web. Dưới đây là cách bước
để hoàn thành đồ án.
Bước 1: Nghiên cứu EmberJS
Tìm hiểu EmberJS: Nghiên cứu cơ bản về EmberJS, bao gồm cấu trúc
components, services routing và các tính năng quan trọng để hiểu rõ cách sử dụng
EmberJS trong phát triển front-end của trang web.
Bước 2: Phân tích nhu cầu và thiết kế hệ thống
Phân tích nhu cầu: Bắt đầu bằng việc xác định yêu cầu chính của dự án bao gồm
chức năng của trang web, nhu cầu kinh doanh và yêu cầu về thông tin sản phẩm.
Thiết kế hệ thống: Xây dựng một thiết kế hệ thống tổng quan, bao gồm cấu trúc
của trang web, các chức năng chính của web như hiển thị thông tin sản phẩm, đăng ký và
đăng nhập vào hệ thống, tìm kiếm sản phẩm và giỏ hàng để thêm các sản phẩm.
Bước 3: Thiết kế giao diện
Thiết kế giao diện: Tập trung vào trải nghiệm trực quan, dễ nhìn và dễ sử dụng để
người dùng duyệt, tìm kiếm sách và thực hiện giao dịch mua hàng.Trang chủ giới thiệu
các sách mới phát hành và sách nổi bật kèm theo hình ảnh. Trang sản phẩm liệt kê các
loại sách theo từng danh mục sách khác nhau. Nhấp vào sách có thể thêm vào giỏ
hàng.Tìm kiếm sản phẩm hoạt động bằng cách nhập từ cần tìm và hiện thị ra kết quả tên
sách, giá bán.
Bước 4: Hiện thực hóa nghiên cứu

Cài đặt: Cài đặt NodeJs phiên bản LTS (Long-Term-Support) để có sự tương
thích với EmberJs.Cài đặt Ember CLI để giúp tạo và quản lý dự án EmberJs.
Hiện thực hóa Front-end: Viết mã front-end bằng Html, Css, EmberJS, áp dụng
các khái niệm đã nghiên cứu như components, services và routing để xây dựng giao diện
người dùng tương tác.
Kiểm thử và Debug: Thực hiện kiểm thử chức năng và kiểm thử để đảm bảo tính
ổn định và an toàn của trang web.

CHƯƠNG 2 NGHIÊN CỨU LÝ THUYẾT

2.1 Front-end
2.1.1 HTML
HTML là gì?
HTML (viết tắt của từ HyperText Markup Language, hay còn gọi là "Ngôn ngữ
Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang
web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các
ngôn ngữ kịch bản giống như JavaScript.
Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữ
cục bộ và render tài liệu đó thành các trang web đa phương tiện. HTML mô tả cấu trúc
của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất
hiện của tài liệu.
Các phần tử HTML là các khối xây dựng của các trang HTML. Với cấu trúc
HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào
trang được hiển thị. HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng
cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists, links,
quotes và các mục khác. Các phần tử HTML được phân định bằng các thẻ, được viết
bằng dấu ngoặc nhọn. Các thẻ như <img /> và <input /> giới thiệu trực tiếp nội dung vào
trang. Các thẻ khác như <p> bao quanh và cung cấp thông tin về văn bản tài liệu và có
thể bao gồm các thẻ khác làm phần tử phụ. Các trình duyệt không hiển thị các thẻ HTML,
nhưng sử dụng chúng để diễn tả nội dung của trang.
HTML có thể nhúng các chương trình được viết bằng JavaScript, điều này ảnh
hưởng đến hành vi và nội dung của các trang web. Việc bao gồm CSS xác định giao diện
và bố cục của nội dung.
Lịch sử ra đời
HTML được phát triển từ năm 1990 bởi tổ chức CERN nhằm tạo ra một cách
thống nhất để trình bày tài liệu có liên kết giữa các trang.
Phiên bản 1.0 chính thức công bố năm 1993. Phiên bản 4.01 được công nhận là
chuẩn HTML cho đến năm 1999.

Hiện nay phiên bản phổ biến nhất là HTML5, được phát triển nhằm hỗ trợ tính
năng tương tác và đa phương tiện trên các trình duyệt web hiện đại.
Các tag thông dụng của HTML
HTML tags được sử dụng chủ yếu là 2 loại chính: block-level tags và inline tags.
Elements Block-level : đây là loại tag cấp cao nhất, sẽ sử dụng toàn không gian
trang web và luôn bắt đầu dòng mới của trang web.Ba block-level tags mà tất cả các
trang HTML có: <html></html>, <head></head> và <body></body>.
Inline elements chỉ chiếm phần nhỏ không gian web và không bắt đầu dòng mới
của trang web. Chúng thường dùng để định dạng nội dung bên trong của block level
elements.
Block-Level Tags
3 block level tags của mỗi trang HTML cần có những tag như là <html>, <head>,
và <body>.
Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang HTML.
Tag <head></head> chứa các thông tin meta như là tiêu đề trang và charset.
Cuối cùng, <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên
trang.
Inline Tags
Inline tags thường được dùng để định dạng, tạo bố cục cho nội dung bên trong
của block-level tags. Ví dụ tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó
tag <em></em> sẽ định dạng chữ in nghiên.
Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác
định link cụ thể: <a href="https://topdev.vn/">Click me!</a>
Ảnh cũng là element inline. Người dùng có thể thêm ảnh bằng cách sử dụng
tag <img> mà không cần tag đóng. Nhưng người dùng cũng cần sử dụng attribute src để
xác định nguồn ảnh, ví dụ như:
<img src="/images/example.jpg" alt="Example image">

2.1.2 CSS
CSS là gì?
CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử
dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website. CSS được ra mắt vào
năm 1996 bởi World Wide Web Consortium (W3C).
CSS xử lý một phần giao diện của trang web. Sử dụng CSS, bạn có thể kiểm soát
màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được
đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, các
biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như hàng loạt
các hiệu ứng khác.
Cách CSS hoạt động đó chính là tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ
HTML, ID, class. Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các
vùng đã chọn.
CSS cung cấp khả năng kiểm soát mạnh mẽ việc trình bày tài liệu HTML. Thông
thường CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML.
HTML và CSS có mối quan hệ gắn bó mật thiết với nhau. Nếu HTML là nền
tảng của một trang web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó.
Mối quan hệ của CSS và HTML
CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website. Nếu
HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu
sắc của chiếc xe.
Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có
tình thẩm mỹ. CSS làm cho giao diện người dùng của một trang web mang đến trải
nghiệm người dùng tốt nhất. Nếu không có CSS, các trang web sẽ kém bắt mắt hơn và có
thể khó điều hướng hơn nhiều. Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu
chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa.
Cấu trúc của một đoạn CSS
Thông thường, một đoạn CSS sẽ bao gồm các phần:
vùng chọn {thuộc tính: giá trị; thuộc tính: giá trị;….. }
Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong
dấu ngoặc nhọn. Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các
giá trị đã có trong danh sách của CSS.
Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai
chấm, mỗi dòng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng. Các thuộc tính
không bị giới hạn ở một vùng chọn.
Trong đó:
Bộ chọn (Selector): mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong
cách. Bạn có thể áp dụng các selector cho các trường hợp sau:
Tất cả những phần tử được định dạng theo một dạng cụ thể nào đó, ví dụ phần tử
tiêu đề h2.
Thuộc tính id, class của phần tử.
Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân cấp
tài liệu.
Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và
chúng được phân tách với nhau bằng dấu chấm phẩy. Mỗi khai báo lại bao gồm tên & giá
trị đặc tính CSS, dược phân tách với nhau bằng dấu phẩy. Quy tắc khai báo CSS là chúng
luôn phải kết thúc bằng dấu chấm phẩy, và khối khai báo phải nằm trong các dấu ngoặc
móc.
Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu cho
một phần tử HTML. Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính mà bạn muốn tác
động nhất trong bộ quy tắc bạn đã tạo ra.
Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn một thuộc
tính trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính.
Ưu điểm của ngôn ngữ CSS
Ngôn ngữ CSS có một số ưu điểm như sau:
Tăng tốc độ tải trang: CSS cho phép người dùng sử dụng ít đoạn mã vì vậy tốc
độ tải trang sẽ được cải thiện đáng kể. Ngoài ra, người dùng còn có thể sử dụng một quy

tắc CSS và áp dụng nó cho tất cả các lần xuất hiện của một thẻ nhất định trong tài liệu
HTML.
Cải thiện trải nghiệm người dùng: CSS không chỉ làm cho các trang web dễ nhìn
hơn, nó còn giúp các website có định dạng thân thiện với người dùng. Khi các nút và văn
bản ở vị trí hợp lý và được sắp đặt tốt, trải nghiệm người dùng sẽ được cải thiện.
Thời gian phát triển nhanh: Với CSS, bạn có thể áp dụng các quy tắc và kiểu
định dạng cụ thể cho nhiều trang bằng một chuỗi mã. Một biểu định kiểu xếp tầng có thể
được sao chép trên một số trang web. Ví dụ: nếu người dùng có các trang sản phẩm tất cả
phải có cùng định dạng, giao diện, thì việc viết quy tắc CSS cho một trang sẽ đủ cho tất
cả các trang cùng loại.
Thay đổi định dạng dễ dàng: Nếu người dùng cần thay đổi định dạng của một
nhóm trang cụ thể, người dùng có thể dễ dàng thực hiện việc này với CSS mà không cần
phải sửa từng trang riêng lẻ. Chỉ cần chỉnh sửa biểu định kiểu CSS tương ứng và người
dùng sẽ thấy các thay đổi được áp dụng cho tất cả các trang đang sử dụng biểu định kiểu
đó.
Khả năng tương thích trên các thiết bị: Thiết kế web đáp ứng là một vấn đề cần
được chú trọng. Trong thời đại ngày nay, các trang web phải hiển thị đầy đủ và có thể
điều hướng dễ dàng trên tất cả các thiết bị. Cho dù thiết bị di động hay máy tính bảng,
máy tính để bàn hay thậm chí là TV thông minh, CSS kết hợp với HTML để tạo ra thiết
kế đáp ứng.
2.1.3 JavaScript
JavaScript là gì?
JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và
nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như là
một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng
như phía máy chủ (NodeJS) tạo ra các trang web động.
JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối
tượng. Là một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để
xây dựng một website sống động, chuyên nghiệp:

HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website.
CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc.
JavaScript: Tạo nên những nội dung “động” trên website.
Lịch sử phát triển của Javascript
Brendan Eich chính là người đã phát triển JS tại Netscape với tiền thân là Mocha.
Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi thành JavaScript.
Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và đến
năm 1999 thì ECMAScript 3 được ra mắt.
Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng, đồng
thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lập trình viên.
Javascript dùng để làm gì?
Bên cạnh việc tìm hiểu javascript là ngôn ngữ gì được sử dụng để làm gì rất
quan trọng. Việc nắm bắt được mục đích của ngôn ngữ đặc biệt này sẽ giúp người dùng
dễ dàng sử dụng chúng hơn trong công việc. Cụ thể như sau:
Thay đổi nội dung HTML: Một trong số nhiều phương thức HTML JavaScript
chính là getElementById (). Người dùng sử dụng để tìm một phần tử của HTML với id
=”demo” và dùng để thay đổi nội dung của phần từ (Internal HTML) sang thành “Hello
JavaScript”
Thay đổi giá trị thuộc tính HTML: Tổng quan về javascript còn có thể sử dụng để
thay đổi các giá trị của thuộc tính. Ví dụ: thay đổi thuộc tính src (source) của tag<img>.
Thay đổi kiểu HTML: Đây chính là một hoạt động biến thể của việc thay đổi
thuộc tính của HTML ở trên. Ví dụ: document.getElementById(‘demo’).style.fontSize =
’35px;
Ẩn các phần tử HTML: Một hoạt động tiếp theo là Javascript có thể ẩn được các
phần tử HTML. Chúng có thể được thực hiện thông qua hoạt động thay đổi kiểu hiển thị
các phần tử HTML.

Hiển thị các phần tử HTML: Một điểm đặc biệt là JavaScript có thể hiển thị được
các yếu tố HTML ẩn. Đồng thời, cũng có thể thực hiện được thông qua cách thay đổi
kiểu hiển thị phần tử.
Ưu điểm của ngôn ngữ lập trình Javascript
Những lỗi Javascript rất dễ để phát hiện, từ đó giúp người dùng sửa lỗi một cách
nhanh chóng hơn.
Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến
một compiler.
JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau.
Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn
nhiều so với các ngôn ngữ lập trình khác.
JS còn có thể được gắn trên một số các element hoặc những events của các trang
web.
Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác
cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.
Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input
thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database.
Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop,
Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính năng).
Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau.
Nhược điểm của ngôn ngữ lập trình Javascript .
JavaScript không có khả năng đa luồng hoặc đa dạng xử lý.
Những thiết bị khác nhau có thể sẽ thực hiện JavaScript khác nhau, từ đó dẫn đến
sự không đồng nhất.
Vì tính bảo mật và an toàn nên các Client-Side JavaScript sẽ không cho phép đọc
hoặc ghi các file.
JavaScript không được hỗ trợ khi người dùng sử dụng ở trong tình trạng thiết bị
được kết nối mạng.

2.2 EmberJS
EmberJS là gì?
EmberJS là một framework mã nguồn mở JavaScript phía client dùng cho phát
triển các ứng dụng web và sử dụng mô hình MVC (Model-View-Controller).
Trong EmberJS, route được sử dụng như model, handlebar template giống như
view còn controller điều khiển dữ liệu trong model
EmberJS tên thật là SproutCore MVC framework. Được phát triển bởi Yehuda
Katz và bắt đầu phát hành vào tháng 12 năm 2011
Tại sao nên sử dụng Ember
EmberJS là một framework mã nguồn mở JavaScript theo MIT license.
Linh hoạt cho các trang web tốc độ cao, tăng hiệu suất của ứng dụng mà không
cần reload trang.
Có các thư viện handlebars templating tương tự như HTML.
Có kích thước nhỏ hơn các thư viện Javascript khác.
Data binding được hỗ trợ đầy đủ. Có sự liên kết giữa 2 thuộc tính, khi một thuộc
tính thay đổi mà tác động đến thuộc tính còn lại thì thuộc tính còn lại cũng được update
theo.
Tính năng
EmberJS được sử dụng cho việc tạo và bảo trì các ứng dụng web.
View của EmberJS được tạo bởi các handlebars templates nên rất thuận tiện cho
việc thiết kế font-end.
Tự động xác định route và controller.
Loại bỏ những khuôn mẫu cũ và thay bằng các kiến trúc ứng dụng tiêu chuẩn.
Ember.js có HTML và CSS là cốt lõi của mô hình phát triển.
Routes là tính năng cốt lõi để quản lý URL.
Hỗ trợ chuyên sâu nhiều loại view.

2.3 Cách cài EmberJS
2.3.1 NodeJS
Đầu tiên cần cài môi trường NodeJS vì EmberJS là một JavaScript framework, và
để chạy được các ứng dụng EmberJS, người dùng cần có môi trường JavaScript runtime.
NodeJS là một môi trường chạy mã JavaScript ngoài trình duyệt, và nó cung cấp các tính
năng và thư viện hỗ trợ phát triển ứng dụng web.
2.3.2 Ember CLI
Ember CLI(Command Line Interface) là giao diện dòng lệnh cách chính thức để
tạo, xây dựng, kiểm tra và phục vụ các tệp tạo nên ứng dụng hoặc addon Ember.
Npm install –g ember-cli

CLI được thiết kế để tương thích ngược với các ứng dụng Ember cũ hơn và duy trì
lịch phát hành 6 tuần, tạo điều kiện thuận lợi cho việc cập nhật và mở rộng. Mục tiêu của
CLI là giúp nhà phát triển tập trung vào việc xây dựng các ứng dụng tuyệt vời mà không
cần lo lắng về việc phối hợp các thành phần với nhau trong quá trình phát triển ứng dụng.
Điều này giúp ứng dụng dễ bảo trì và dễ tiếp cận, nhờ vào việc thiết lập mẫu kiến trúc
giữa các cá nhân, nhóm và công ty.
2.3.3 Tạo một app với Ember.
Khi CLI đã được cài đặt, tiến hành tạo ứng dụng mới. Bằng cách sử dụng lệnh tạo
mới, có thể tạo một ứng dụng với cú pháp như sau: "ember new [app_name]". Đây là nơi
có thể đặt tên cho ứng dụng mới.
ember new [app_name]

Ví dụ: ember new ember-project
Sau khi gõ lệnh tạo mới, CLI sẽ bắt đầu quá trình tải xuống các phụ thuộc, cấu
hình môi trường và tạo cấu trúc cơ bản cho ứng dụng. Quá trình này có thể mất một thời
gian tùy thuộc vào kích thước của ứng dụng và tốc độ mạng.Chạy lệnh new app thành
công sẽ tạo ra một thư mục ember-project.Tiếp theo di chuyển đến thư mục ember-
project và khởi động server bằng các lệnh sau:
cd ember-project
ember server

Tạo một ứng dụng mới bằng EmberCLI rất đơn giản và tiện lợi.EmberCLI giúp tối
ưu hóa quy trình phát triển và triển khai các ứng dụng, giúp người dùng tập trung vào
việc xây dựng các ứng dụng mà không cần lo về việc phối hợp các thành phần với nhau.
2.4 Cấu trúc của một thư mục ứng dụng EmberJs
ember-project/
|- app/
| |- adapters/
| |- components/
| |- controllers/
| |- helpers/
| |- models/
| |- routes/
| |- styles/
| |- templates/
| |- app.js
| |- router.js
|
|- config/
| |- environment.js
|
|- public/
|
|- tests/
| |- acceptance/
| |- helpers/
| |- integration/
| |- unit/
|
|- vendor/
|
|- .ember-cli
|- .eslintrc.js
|- .gitignore
|- ember-cli-build.js
|- package.json
|- README.md
Thư mục App
đây là thư mục chưa các models, components, routes, templates and styles được
lưu trữ. Đa số tất cả mã nguồn của một lập trình viên sẽ được phát triển trong thư mục
này.
Bower_components / bower.json
Bower là một thư viện quản lý suorce code phụ thuộc của thư viện js(phần này có
thể so sánh như composer trong PHP hoặc file gem trong ruby on rails). Tất cả các install

sẽ được lưu trong thư mục bower_components.Và để cài đặt khai báo trong
file bower.json.
Config
File này config môi trường cho ứng dụng ember.
Dist
Khi xây dựng một ứng dung web, thì tất cả các file đầu ra sẽ được lưu trong thư
mục này.
Node_modules / package.json
EmberJS là một framework chạy trên nền tảng nodeJS vì vậy khi thấy thư mục này
sẽ không thấy gì lạ. Nó là thư mục quản lý tất cả thư viện của nodeJS.
Public
Thư mục này chưa tất cả phần liên quan tới fonts, images.
Vendor
Thư mục này chứa các file như javascript, css mà không được quản lý bởi bower.
Tests / testem.js
Thư mục chưa các output của phần auto test trong Ember.
Ember-cli-build.js
tập tin mô tả Ember CLI tạo dưng một ứng dụng Ember.
2.5 Các thành phần chính trong EmberJS.
Để có thể sử dụng các mã code trong EmberJs, người dùng cần phải hiểu nó hoạt
động như thế nào và các phần tạo ra nó. EmberJS có 6 phần sau:

Hình 2.1.Mô hình hoạt động trong EmberJS
2.5.1 Template
Template là một phần thiết yếu để định nghĩa giao diện người dùng.Vì vậy
template có giao diện người dùng mạnh mẽ. Cũng giống như HTML thông thường,
EmberJS cung cấp các thư viện handlebar template để xây dựng các ứng dụng front-end.
Trong Ember thì Handlebars là thư viện phía máy khách có chức năng cung cấp các biểu
thức. Một ví dụ về thư viện Handlebars:
<script type="text/x-handlebars"> <h2><strong>{{firstName}}

{{lastName}}</strong></h2> </script>
Thêm vào đó, Emberjs cũng hỗ trợ cho các biểu hiện thường xuyên và tự động cập nhật
các biểu thức.
Application Template
Nếu người dùng không xác định mẫu trong ứng dụng của người dùng,
Ember.js sẽ mặc định tạo một mẫu ứng dụng. Ember.js mẫu được đặt trong <script> .
Người dùng phải xác định ít nhất một vị trí: {{outlet}} để router điền các mẫu thích
hợp.
<script type="text/x-handlebars">
<div>
{{outlet}}
</div>
<h2>{{App.name}}</h2>
</script>

Trong đoạn code trên, tôi sử dụng các handlebar template. Nó được khai báo
bên trong thẻ script giúp hiển thị các thuộc tính name của ứng dụng.
Handlebars Basics
Ember.js sử dụng handlebar template để xây dựng UI. Nó là giống như HTML
và cũng có khả năng nhúng các biểu thức. Các handlebar expression có một bộ điều
khiển hiển thị các giá trị cập nhật của các thuộc tính.
Hi, <h2>{{App.firstName}} {{App.lastName}}</h2>
</script>
Đoạn code trên hiển thị các giá trị của firstName và lastName.
2.5.2 Controller
Controller về cơ bản được dùng để quản lý logic hiển thị của model và cũng kiểm
soát các hoạt động giữa các routes, model, và view. Chúng hoạt động theo cách giúp truy
xuất vào các thuộc tính của model và cho phép template truy xuất các thuộc tính đó để
xuất ra phần hiển thị. Vì vậy, template và controller luôn có sự kết nối với nhau. EmberJs
tạo ra bộ điều khiển tự động.

Hình 2.2 Các khớp nối của mẫu, điều khiển và mô hình
Các mẫu có liên quan đến các bộ điều khiển và nhận được dữ liệu của họ từ nó.
Các giao dịch mẫu với các bộ điều khiển và bộ điều khiển giao dịch với các mô hình.
Một mô hình không biết về bộ điều khiển được trang trí nó và điều khiển không biết về
quan điểm đó được đại diện cho các thuộc tính của nó.
Representing Models
Bộ điều khiển Ember.js có các thuộc tính proxy, vì vậy mà người dùng có thể
trực tiếp gọi các thuộc tính trong mẫu của người dùng. Templates dữ liệu từ các mô
hình và luôn luôn kết nối với bộ điều khiển, không phải mô hình riêng biệt. Ví dụ,
người dùng có thể mất {{name}} dữ liệu chứ không phải là {{model.name}} trong đó
dữ liệu EmberJS proxy từ mô hình. Các Ember.ArrayConroller cung cấp proxy từ một
mảng và Ember.ObjectConroller cung cấp proxy từ một đối tượng.
Storing Application Properties

Đôi khi người dùng cần phải tiết kiệm dữ liệu của các ứng dụng trên máy chủ
của người dùng. Người dùng có thể lưu trữ thời gian tính ứng dụng cuộc sống bằng
cách lưu trữ nó trên một bộ điều khiển.
Biểu diễn một mô hình đơn bằng ObjectController
Đại diện cho các mô hình duy nhất, người dùng có thể tận dụng các
Ember.ObjectController . Thiết lập mô hình dữ liệu của ObjectController trong những
tuyến đường setupController để đại diện cho các mô hình mà người dùng đang sử dụng.
Các mẫu hình cho một ObjectController cho giá trị của một dữ liệu và bộ điều khiển sẽ
cho một tài sản có cùng tên trong mô hình.
Ember.ObjectController.extend({
//put your properties
});
Biểu diễn nhiều mô hình bằng bộ điều khiển mảng
Đại diện cho các mảng của các mô hình, người dùng có thể tận dụng các
Ember. ArrayController . Thiết lập mô hình tài sản của ArrayController trong những
tuyến đường setupController để đại diện cho các mô hình mà bạn đang sử dụng.use.
Ember.ArrayController.extend({ //do the logic });
Quản lý sự phụ thuộc giữa các bộ điều khiển
Trong thời gian làm tổ các nguồn lực người dùng cần phải thiết lập kết nối
giữa hai bộ điều khiển và người dùng cũng có thể kết nối nhiều bộ điều khiển với nhau
bằng cách sử dụng một mảng của bộ điều khiển.
Ember.Controller.extend({
nameofArray: ['value1', 'value2']
});
Trong đoạn code trên, nameofArray là một tên mảng tùy chỉnh được đưa ra bởi
người dùng và value1 và value2 là nội dung của mảng.

2.5.3 Routing
Mỗi route là một đại diện URL của đối tượng ứng dụng và chuyển nó thành nested
templates. Router có nhiệm vụ quản lý các trạng thái và tài nguyên cần thiết khi người
dùng điều hướng ứng dụng.
Để thực hiện việc này bạn cần tạo ra một route và xác định vị trí cụ thể của nó
trong ứng dụng. Các route sẽ xác định được các phần của ứng dụng và URL ( identifier
chủ chốt của Ember) sẽ tương tác với chúng.
Router truy vấn tới các model từ móc mô hình của chúng để cung cấp sẵn trong
controller và trong template. Router được khai báo trong các đối tượng Router singleton.
Ghi nhật ký thay đổi lộ trình
Là một ứng dụng phát triển phức tạp, ghi lại quá trình của router.
ENV.APP.LOG_TRANSITIONS = true;
Đoạn code trên chuyển các sự kiện chuyển đổi sang các sửa đổi.
Chỉ định URL gốc
Nếu EmberJs domain có nhiều ứng dụng web, Trong trường hợp đó người dùng cần
phải xác định các URL gốc để chỉ ra các routers.
Ember.Router.extend({
rootURL: 'Path'
});
Đoạn code trên mô tả làm thế nào để xác định các URL gốc. Những 'Path' là
đường dẫn URL gốc.
Xác định tuyến đường
Các router phù hợp với URL hiện tại với các routes đó là trách nhiệm hiển thị
mẫu, tải dữ liệu và thiết lập application state. Bản đồ các phương thức router được sử
dụng để định nghĩa các ánh xạ URL mà bỏ qua một chức năng mà có tham số như một
đối tượng để tạo ra các toutes. Các {{link-to}} helper điều hướng các bộ định tuyến.
Router.map(function() {
this.route('link-page', { path: '/PathTolinkpage' });
this.route('link-page', { path: '/PathTolinkpage' });

});
Đoạn code trên mô tả làm thế nào để liên kết các trang khác nhau bằng cách sử
dụng bản đồ router. Nó lấy tên linkpage và path như một tham số.
Đối tượng được tạo
Nếu người dùng không xác định các đối tượng Route, Controller, View và
Template classes Ember.js sẽ tự động tạo ra các đối tượng này vào ứng dụng của người
dùng.
Tuyến đường đã tạo
Các EmberJS sẽ tự động tạo ra các route nếu người dùng không xác định trong
ứng dụng của người dùng.
Bộ điều khiển được tạo
Các Ember.js sẽ tự động tạo ra các controller cho các route thích hợp, nếu nó
không được định nghĩa trong ứng dụng của người dùng.
Chế độ xem và mẫu được tạo
Các EmberJS sẽ tự động tạo ra view nếu bạn không xác định trong ứng dụng
của bạn. Template không có gì ngoài outlet . Nếu người dùng không khai báo outlet,
EmberJS sẽ tự động tạo ra {{outlet}} trong mẫu.
2.5.4 Model
Model là đại diện của đối tượng liên quan đến data.Model và route có liên quan
đến nhau bởi vì model thực thi các routes bởi một tham số để gọi một route. Nó điều
khiển các dữ liệu được lưu trữ trong cơ sở dữ liệu. Thông qua Model để mở rộng các
chức năng của Ember Data. Ember data là một thư viện kết hợp chặt chẽ với Ember.js để
điều khiển với dữ liệu được lưu trữ trong cơ sở dữ liệu.
Các khái niệm cốt lõi của Model:
Store
Các store là kho lưu trữ trung ương và bộ nhớ cache của tất cả các hồ sơ có sẵn
trong một ứng dụng. Các tuyến đường và các bộ điều khiển có thể truy cập dữ liệu

được lưu trữ trong ứng dụng của người dùng. Các DS.Store được tạo ra tự động để
chia sẻ dữ liệu giữa các toàn bộ đối tượng.
this.store.find('model_type', id)
Ember.Route.extend({
model: function() {
return this.store.find();
}
});
Models
Models là một lớp trong đó xác định các dữ liệu thuộc tính và hành vi. Khi một
người sử dụng làm mới trang, nội dung của trang sẽ được đại diện bởi một mô hình.
DS.Model.extend({
birthday: DS.attr('date')
});
Records
Records là một thể hiện của một mô hình trong đó có chứa thông tin đó được
tải từ một máy chủ và nó được xác định duy nhất bởi loại mô hình của nó và id.
Adapter
Adapter là một đối tượng có trách nhiệm cho việc dịch hồ sơ yêu cầu vào các
cuộc gọi thích hợp cho riêng máy chủ phụ trợ.
Serializer
Một serializer có trách nhiệm chuyển dữ liệu JSON thành đối tượng kỷ lục.
Automatic Caching
Các hồ sơ lưu trữ bộ nhớ cache tự động và nó trả lại ví dụ cùng một đối tượng
khi các bản ghi lấy từ máy chủ cho lần thứ hai. Điều này cải thiện hiệu suất của ứng
dụng của người dùng.

2.5.5 View
Chức năng của view trong Ember.js là quản lý sự kiện xung quanh tương tác của
người dùng và chuyển chúng thành các sự kiện có ý nghĩa trong ứng dụng.
View được tạo ra vì hai lý do:
Các sự kiện người dùng khi cần xử lý gặp vấn đề quá khó và phức tạp
Người dùng có thể tạo ra một thành phần tái sử dụng được. View chịu trách
nhiệm xử lý các sự kiện người dùng và cập nhật các DOM. Các Handlebars
templates được đánh giá để tạo ra view. Trong đánh giá của các templates, view
con sẽ được thêm vào. Nó giúp giữ cho hệ thống ứng dụng mạnh mẽ bằng cách
cung cấp các giao diện người dùng phong phú.
2.5.6 Component
Ember.js components sử dụng W3C đặc tả thành phần web và các thành phần
cung cấp đúng đóng gói giao diện widget. Nó chứa các đặc điểm kỹ thuật chính như
templates, shadow DOM và các yếu tổ tùy chỉnh. Các thành phần được khai báo bên
trong data-template-name có tên đường dẫn thay vì một chuỗi. Các thành phần được bắt
đầu với "components/".
//component name
{{my-name}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-

name">
// This is component
</script>
Trong đoạn code trên, my-name là tên của thành phần được khai báo bên trong
data-template-name như components/my-name.
Xác định thành phần
Rất dễ dàng để xác định thành phần trong EmberJS bằng cách tạo một template
có tên bắt đầu với components/. Các thành phần phải có dấu gạch ngang trong tên.
EmberJS có sức mạnh của việc xác định các lớp con phần bằng cách sử dụng một
Ember.Component class.

//component name
{{my-comp}}
</script>

comp">
// This is component
</script>
Ember.Component.extend({ //do the stuff });
Trong đoạn code trên, my-comp là thành phần khai báo như components/my-
comp trong thẻ script tiếp theo. Người dùng cũng có thể mở rộng Ember.Component
class để có nhiều hiệu ứng.
Đóng gói nội dụng trong thành phần
Người dùng cũng có thể định nghĩa một thành phần giúp để kết thúc các nội dung
được cung cấp bởi các mẫu khác và cũng vượt qua các thuộc tính cho mẫu khác.
Component cũng hỗ trợ cho khối và được bắt đầu bằng # trong mẫu.
//component name
{{my-comp title=title body=body}}
</script>

comp">
// This is the component
{{title}} {{body}}
</script>
Trong đoạn code trên, chúng ta pass quá các tiêu đề và body properties với mẫu
khác.
Tùy biến thành phần
Người dùng cũng có thể tùy chỉnh các thành phần EmberJS. Điều này có thể
được thực hiện bằng cách tạo ra các lớp con Ember.Component bằng cách bao gồm các
thuộc tính của nó và tên lớp.: Bảng sau đây liệt kê xuống các thuộc tính tùy biến các
thành phần: 1 Tùy biến thành phần Tùy chỉnh tên tag HTML theo nhu cầu phát triển. 2
Tùy biến lớp Names Tùy chỉnh tên lớp các tag HTML theo nhu cầu phát triển. 3 Tùy biến
thuộc tính Bạn có thể ràng buộc các thuộc tính đến các yếu tố DOM bằng cách sử dụng
attributeBindings.

2.5.7 Quy tắc đặt tên
Quy tắc đặt tên trong Emberjs giúp giảm thiểu lượng coder và ngầm xử lý mọi thứ.
Cách xác định và đặt tên các tài nguyên ảnh hưởng đến đặt tên các phần còn lại (
controller, model, view và template)
Ví dụ: nếu tạo một route, gọi là "product"
Vậy tôi sẽ đặt tên các thành phần như sau:
Route object: App.productRoute.
Controller: App. product Controller.
Model: App. Product.
View: App. product View.
Template: product.
Sử dụng quy tắc đặt tên này có hai mục đích:
Nó cho người dùng một mối quan hệ ngữ nghĩa giữa các thành phần.
Ember có thể tự động tạo ra các đối tượng cần thiết.
2.6 Điểm mạnh và điểm yếu của EmberJS
Về điểm mạnh:
Kiến trúc MVC rõ ràng: Ember.js tuân thủ nghiêm ngặt mô hình MVC giúp tách
biệt logic xử lý và trình bày giao diện. Điều này làm cho code được tổ chức tốt hơn, dễ
bảo trì và mở rộng hơn.
Hỗ trợ các Component mạnh: Ember hỗ trợ xây dựng các Component độc lập, có
thể tái sử dụng dễ dàng. Điều này giúp giảm thiểu duplicating code, tăng khả năng mở
rộng và bảo trì cho ứng dụng.
LiveReload nhanh chóng: Ember hỗ trợ tính năng LiveReload giúp lập trình viên
có thể thấy ngay sự thay đổi khi code thay đổi, đặc biệt hữu ích trong quá trình phát triển
nhanh ban đầu.

Cộng đồng đông đảo và nhiều tài liệu học tập: EmberJs có một cộng đồng rộng lớn
trên toàn cầu, luôn cập nhật những kiến thức và phát triển mới nhất. Điều này giúp người
dùng mới dễ học và tiếp cận với framework.
Về điểm yếu:
Khởi tạo dự án phức tạp: Quá trình khởi tạo ban đầu của Ember yêu cầu nhiều cấu
hình và cài đặt thư viện hơn so với các framework nhẹ hơn.
Tạo ra nhiều callback phức tạp: Khi không quản lý tốt, Ember có thể dẫn đến
nhiều callback lồng nhau và logic phức tạp.
Tốc độ xử lý chậm hơn: So với các framework nhẹ hơn như VueJS, tốc độ xử lý
của Ember thường chậm hơn do phụ thuộc nhiều mối phụ thuộc.
Dung lượng bundle lớn: Nếu không tối ưu hóa, kích thước bundle của các ứng
dụng Ember thường lớn hơn so với các framework khác.
Học quá nhiều thứ cho lần đầu: Để làm quen hoàn toàn với Ember, lập trình viên
phải học đủ kiến thức về MVC cũng như các thành phần riêng của Ember.
Cập nhật chậm hơn so với các framework mới: Ember đã ra mắt lâu năm nên tốc
độ cập nhật và phát triển các tính năng mới có phần chậm hơn so với các framework mới
như ReactJS, AngularJS,...
2.7 Kết luận
EmberJS là một framework JavaScript của SproutCore giúp xây dựng ứng dụng
web động. Nó sử dụng mô hình MVC để quản lý dữ liệu và tương tác với người dùng, kết
hợp với khả năng liên kết dữ liệu giúp tối ưu hóa hiệu suất phát triển. Có thể xây dựng
nên một trang web linh hoạt mang lại trải nghiệm tốt cho người dùng và quản lý dữ liệu
một cách hiệu quả.

CHƯƠNG 3 HIỆN THỰC HÓA NGHIÊN CỨU

3.1 Mô tả bài toán
Bài toán có thể được mô tả như sau: Xây dựng một trang web giới thiệu các sản
phẩm sách trong đó sử dụng EmberJs để hiển thị danh sách các sản phẩm sách và cung
cấp thông tin chi tiết cho mỗi cuốn sách khi người dùng chọn. Website gồm có 4 trang:
Trang chủ dùng để hiển thị sơ lược các cuốn sách để người dùng có thể hình dung được
nội dung mà trang web hướng đến. Ở trang Sản phẩm sẽ hiển thị đầy đủ tất cả các cuốn
sách người dùng có thể tìm hiểu những thông tin cụ thể hơn bằng cách nhấn vào bất kì
một cuốn sách nào đó sẽ được hiển thị thông tin như tên và giá bán, ngoài ra trang sản
phẩm cũng có thêm chức năng tìm kiếm giúp người dùng có thể tìm kiếm một cuốn sách
nào đó nhanh hơn. Trang đăng ký và đăng nhập giúp người dùng tạo tài khoản và đăng
nhập vào web một dễ dàng và nhanh chóng. Cuối cùng là trang giỏ hàng giúp người dùng
có thể thêm những sản phẩm sách có thể cập nhật số lượng và đặt hàng.
3.2 Đặc tả yêu cầu hệ thống
3.2.1 Yêu cầu chức năng
Hiển thị danh sách và chi tiết sản phẩm: Chức năng là hiển thị danh sách các
sản phẩm và cho phép người dùng xem chi tiết từng sản phẩm như tên và giá bán.
Tìm kiếm và lọc sản phẩm: Chức năng là người dùng có thể tìm kiếm sản phẩm
theo tên hoặc danh mục và cũng có thể lọc sản phẩm theo giá, phân loại hoặc các tiêu chí
khác.
Thêm sản phẩm giỏ hàng: Chức năng thêm sản phẩm là có thể thêm mới sản
phẩm vào giỏ hàng, có thể tăng và giảm số lượng sản phẩm và hiển thị hình ảnh của sản
phẩm, có thể xóa sản phẩm khỏi giỏ hàng, tính tổng các sản phẩm hiện có trong giỏ hàng
và thanh toán.
3.2.2 Yêu cầu phi chức năng
Giao diện người dùng thân thiện: Yêu cầu một giao diện người dùng phải dễ sử
dụng và thân thiện giúp người dùng dễ dàng tìm kiếm, lọc và xem thông tin chi tiết của
sản phẩm.
Hiệu suất và tốc độ: Đảm bảo trang web hoạt động mượt mà và có thời gian phản
hồi nhanh nhằm cung cấp trải nghiệm người dùng tốt nhất có thể.
Tính năng tương tác mạnh mẽ: Cung cấp tính năng thực hiện các hành động mà
không cần tải lại trang giúp tăng trải nghiệm người dùng.
Kiểm thử đầy đủ: Tiến hành kiểm thử chất lượng để đảm bảo tính ổn định và hiệu
suất của trang web cũng như xác nhận rằng tất cả các chức năng hoạt động đúng như
mong đợi.
3.3 Thiết kế giao diện
3.3.1 Giao diện trang chủ
Giao diện chính của trang web bán sách hiện một số đầu sách có nội dung nổi bật và câu
chăm ngôn của từng quyển.
Hình 3.1: Trang chủ của web bán sách.

3.3.2 Giao diện trang sản phẩm
Giao diện của trang sản phẩm hiện các đầu sách với các thông tin chi tiết như tên
sách và giá bán.
Hình 3.2 Giao diện trang sản phẩm

3.3.3 Giao diện trang đăng ký.
Giao diện trang đăng ký giúp người dùng đăng ký tài khoản.
Hình 3.3.Giao diện trang đăng ký

3.3.4 Giao diện trang đăng nhập
Giao diện trang đăng nhập giúp người dùng đăng nhập tài khoản đã đăng ký.Khi
đăng nhập thành công sẽ chuyển đến trang chủ của website.
Hình 3.4 Giao diện trang đăng nhập.
3.3.5 Giao diện trang giỏ hàng
Giao diện của trang giỏ hàng thể hiện các sản phẩm đã thêm vào giỏ với các
thông tin như giá bán số lượng và tổng cộng.

Hình 3.5.Giao diện trang giỏ hàng.

CHƯƠNG 4 KẾT QUẢ NGHIÊN CỨU

4.1 Dữ liệu thử nghiệm
Dữ liệu sản phẩm:
Sách có đầy đủ thông tin bắt buộc như tên, giá.
Sách thiếu một số thông tin bắt buộc.
Số lượng sách lớn hơn 20 cuốn để kiểm tra hiệu năng.
Dữ liệu danh mục sách:
Nhiều danh mục khác nhau.
Danh mục rỗng hoặc không tồn tại.
Dữ liệu đơn hàng:
Đơn hàng có nhiều mặt hàng khác nhau.
Đơn hàng trống.
Lỗi thanh toán giả định.
Dữ liệu tài khoản:
Tài khoản hợp lệ.
Mật khẩu sai định dạng.
Dữ liệu tìm kiếm:
Từ khóa có kết quả.
Không có kết quả.
Từ khóa đặc biệt.
4.2 Kết quả thử nghiệm
4.2.1 Chức năng phân loại sản phẩm
Chức năng phân loại sách:

Phân loại sách theo thể loại là tạo ra các ngăn để phân chia sách thành từng nhóm
chính như: Tâm lý,Sách kinh doanh, Sách phát triển bản thân, Truyền cảm hứng,... Theo
sở thích và đối tượng độc giả khác nhau.
Hình 4.1Chức năng phân loại sách

4.2.2 Chức năng tìm kiếm
Chức năng tìm kiếm sách theo tên là một tính năng cốt yếu trên một website bán
sách. Nó cho phép người dùng dễ dàng tìm thấy sách mình cần bằng cách nhập từ khóa
tìm kiếm.
Về cơ bản, chức năng này thường hoạt động như sau:
Có một ô nhập liệu để người dùng đánh tên sách hoặc bất kỳ từ khóa nào liên
quan đến sách cần tìm.
Website sẽ trả về kết quả tìm kiếm là danh sách các sách có chứa từ khóa đã
nhập,hiển thị ra thông tin chi tiết của từng cuốn sách.

Hình 4.2 Chức năng tìm kiếm sách
4.2.2.1 Quản lý thêm vào giỏ hàng
Chức năng thêm sách vào giỏ hàng là tính năng quan trọng trong quy trình mua
hàng trực tuyến. Nó cho phép người dùng chọn sách và lưu trữ tạm thời các mặt hàng
muốn mua.
Cụ thể, chức năng này thường hoạt động như sau:
Trên trang chi tiết sản phẩm, người dùng có thể thấy nút "Thêm vào giỏ ".
Khi nhấp vào, sách đó sẽ được lưu vào giỏ hàng tạm thời trên trình duyệt.
Giỏ hàng có thể xem được ở mọi nơi trên website thông qua icon giỏ hàng.
Hiển thị được tổng cộng số lượng, tổng tiền các mặt hàng đã chọn.
Có thể cập nhật, xóa sản phẩm hoặc thanh toán giỏ hàng.
Giúp người dùng tiện lợi lưu trữ và quyết định mua hàng dễ dàng hơn.

Hình 4.3 Chức năng thêm vào giỏ hàng

4.2.2.2 Đăng ký và đăng nhập
Chức năng đăng ký/đăng nhập cho phép người dùng có thể tạo tài khoản cá nhân trên
website để:
Đăng ký:
Nhập thông tin cá nhân: email, mật khẩu.
Xác thực tài khoản qua email.
Tạo tài khoản để có thể đăng nhập sau này.
Đăng nhập:
Nhập địa chỉ email và mật khẩu đã đăng ký.
Kiểm tra xác thực và cho phép đăng nhập vào tài khoản.
Đăng nhập thành công sẽ chuyển đến trang chủ của website.

Hình 4.4 Chức năng đăng ký
Hình 4.5 Chức năng đăng nhập

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Kết luận:
Phân loại sách: Cho phép phân chia sản phẩm ra nhiều nhóm phù hợp giúp người
dùng dễ dàng tìm kiếm sách cần mua.
Tìm kiếm sách: Cung cấp ô tìm kiếm để khách hàng nhập tên hoặc từ khóa liên
quan để nhanh chóng tìm thấy sách cần mua.
Đăng ký/Đăng nhập: Cho phép khách hàng tạo tài khoản cá nhân để quản lý
thông tin, lịch sử đơn hàng, tiện thanh toán sau này.
Giỏ hàng: Lưu trữ tạm thời các sách đã chọn mua, cập nhật số lượng, tổng tiền
trước khi thanh toán.
Những chức năng này đem đến cho người dùng trải nghiệm mua sách thuận tiện,
nhanh chóng từ tìm kiếm, lựa chọn đến thanh toán, góp phần mang đến cho người dùng
website.
Hướng phát triển:
Hệ thống đánh giá, bình luận sách: Người dùng đánh giá sách, đọc bình luận của
người khác để có cái nhìn toàn diện hơn.
Quản lý danh sách mong muốn: Lưu trữ danh sách sách mong muốn mua sau, khi
có ưu đãi sẽ thông báo.
So sánh sản phẩm: Chọn 2-3 sách cùng loại để so sánh thông số kỹ thuật, đánh
giá người dùng.
Đặt hàng và thanh toán: Các tùy chọn thanh toán như thẻ tín dụng, chuyển khoản
ngân hàng...
Hệ thống ưu đãi, khuyến mãi: Mã giảm giá, tặng quà khi đạt mức đơn hàng.
Thông tin sự kiện: Thông báo chương trình khuyến mãi, triển lãm sách sắp diễn
ra.
Hệ thống tích điểm khách hàng thân thiết.


DANH MỤC TÀI LIỆU THAM KHẢO

[1] W3School “W3.CSS Tutorial” W3Schools Online Web Tutorials ,15/11/2023
URL: http://www.en.w3eacademy.com/emberjs/emberjs_model.htm
[2] Đoàn Phước Miền, Phạm Thị Trúc Mai (2013), Tài liệu giảng dạy môn Thiết
kế web, Bộ môn Công nghệ Thông tin, Khoa Kỹ thuật và Công nghệ, Trường Đại học
Trà Vinh.
[3] Lptech, “Html là gì?”,15/11/2023. URL:HTML là gì? Kiến thức tự học

HTML cơ bản (lptech.asia)
[4] Topdev, “Cấu trúc của Html”, 15/11/2023.URL: HTML là gì? | TopDev
[5] AWS.amazon, “javascript”,16/11/2023.URL: JavaScript là gì? - Giải thích về

JavaScript (JS) - AWS (amazon.com)
[6] Tenten, “JavaScript là gì” 16/11/2023.URL: JavaScript là gì? Kiến thức cơ

bản về JavaScript cho người mới bắt đầu 2022 - Tin tức tên miền hosting (tenten.vn)

CSN NguyenDucThinh EmberJs Final

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSN NguyenDucThinh EmberJs Final

Uploaded by

Copyright:

Available Formats

Tìm hiểu về EmberJs và thiết kế website bán sách

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Trà Vinh, ngày ….. tháng …… năm ……

Nguyễn Đức Thịnh 1

NHẬN XÉT CỦA THÀNH VIÊN HỘI ĐỒNG

Trà Vinh, ngày ….. tháng …… năm ……

Nguyễn Đức Thịnh 2

Sinh viên thực hiện

Nguyễn Đức Thịnh 3

CHƯƠNG 1 TỔNG QUAN ...........................................................................................9

Nguyễn Đức Thịnh 4

4.2.2 Chức năng tìm kiếm ......................................................................................39

Nguyễn Đức Thịnh 5

DANH MỤC HÌNH ẢNH – BẢNG BIỂU

Hình 2.1.Mô hình sắp đặt trong EmberJS .........................................................................22

Nguyễn Đức Thịnh 6

TÓM TẮT ĐỒ ÁN CƠ SỞ NGÀNH

Vấn đề nghiên cứu

Hướng tiếp cận

Cách giải quyết vấn đề

Kết quả đạt được

Nguyễn Đức Thịnh 7

Mục đích nghiên cứu

Đối tượng nghiên cứu

Phạm vi nghiên cứu

Nguyễn Đức Thịnh 8

CHƯƠNG 1 TỔNG QUAN

EmberJS ( có tên thật là SproutCore MVC framework) là một framework mã

Bước 1: Nghiên cứu EmberJS

Bước 2: Phân tích nhu cầu và thiết kế hệ thống

Bước 3: Thiết kế giao diện

Bước 4: Hiện thực hóa nghiên cứu

Nguyễn Đức Thịnh 9

Nguyễn Đức Thịnh 10

CHƯƠNG 2 NGHIÊN CỨU LÝ THUYẾT

Nguyễn Đức Thịnh 11

Các tag thông dụng của HTML

<img src="/images/example.jpg" alt="Example image">

Nguyễn Đức Thịnh 12

Mối quan hệ của CSS và HTML

Cấu trúc của một đoạn CSS

Thông thường, một đoạn CSS sẽ bao gồm các phần:

Thuộc tính id, class của phần tử.

Ưu điểm của ngôn ngữ CSS

Ngôn ngữ CSS có một số ưu điểm như sau:

Nguyễn Đức Thịnh 14

Nguyễn Đức Thịnh 15

JavaScript: Tạo nên những nội dung “động” trên website.

Lịch sử phát triển của Javascript

Javascript dùng để làm gì?

Nguyễn Đức Thịnh 16

Ưu điểm của ngôn ngữ lập trình Javascript

Nhược điểm của ngôn ngữ lập trình Javascript .

JavaScript không có khả năng đa luồng hoặc đa dạng xử lý.

Nguyễn Đức Thịnh 17

Tại sao nên sử dụng Ember

EmberJS là một framework mã nguồn mở JavaScript theo MIT license.

Có các thư viện handlebars templating tương tự như HTML.

Có kích thước nhỏ hơn các thư viện Javascript khác.

Tự động xác định route và controller.

Ember.js có HTML và CSS là cốt lõi của mô hình phát triển.

Routes là tính năng cốt lõi để quản lý URL.

Hỗ trợ chuyên sâu nhiều loại view.