44 2.4.2.3 Directives
Tính năng mới này thực sự là đặc điểm tạo nên một khoảng cách lớn giữa Angular và bất kỳ framework JavaScript khác. Directives đề cập đến một tính năng để mở rộng HTML, việc dùng directive sẽ giảm thiểu được số lượng thẻ HTML, code HTML nhìn sẽ gọn gàng và sáng sủa hơn.
Mặc dù HTML có thể có nhiều thẻ, nhưng nó không đủ mạnh để tạo ra một ứng dụng web hiện đại. Với directive, chúng ta có thể tạo ra những thẻ HTML mới hoặc các thuộc tính mới cho tất cả các thẻ trong HTML để trình duyệt hiểu nó có nghĩa là gì và nên làm gì.
Ví dụ với Angular chúng ta có thể tạo ra thẻ như sau <draggable> drag me </ draggable >. Các văn bản bên trong tag <draggable></ draggable> bây giờ sẽ trở thành draggable trong trình duyệt, sau đó chỉ cần viết một định nghĩa cho directive draggable này trong ứng dụng Angular của chúng ta là xong. Đây là một ví dụ đơn giản của Angular, nó có thể làm rất nhiều thứ hữu ích hơn.
Directtive không chỉ giới hạn một phần tử HTML mà còn có thể là thuộc tính, lớp hoặc các chú thích HTML. AngularJS cung cấp cho chúng ta 3 loại directive:
- Directive dạng element (một thẻ HTML) viết tắt là E:
- Directive dạng attribute (thuộc tính của một thẻ HTML) viết tắt là A, dạng này là mặc định.
- Directive dạng class(class CSS) viết tắt là C.
2.4.2.4 Templates
Trong quá trình xây dựng hệ thống lớn, file HTML trở nên rất phức tạp, để giải quyết vấn đề này ta cần chia thành nhiều phần khác nhau, AngularJS cung cấp cho chúng ta một giải pháp hữu ích đó là template.
Angular template là một đặc tả dạng declarative, cùng với thông tin từ model và controller, template được render thành một view mà để hiển thị trên trình duyệt. Template bao gồm các static DOM chứa HTML, CSS và các thành phần, thuộc tính riêng của Angular. Các thành phần Angular và các thuộc tính giúp Angular thêm các hành vi và biến đổi template thành dynamic view DOM.
Trong Angular, chúng ta có 2 cách để tạo một template:
- Dùng file script: Chúng ta có thể tích hợp template vào file HTML hiện hành thông qua thẻ script với type là text/ng-template
<my-directive>...</my-directive>
<div my-directive>...</div>
45 - Dùng file ngoài: Chúng ta cũng có thể tạo một file html với nội dung sau:
- Sử dụng template: Có nhiều cách để sử dụng template, tuy nhiên trong AngularJS có 2 cách thông dụng để dùng template đó là ng-include và ng-route. Ví dụ dưới đây sẽ dùng ng-include để sử dụng template:
Tuy nhiên cách sử dụng ng-include chỉ thích hợp trong các ứng dụng nhỏ, đối với các ứng dụng lớn ng-route (được trình bày trong phần xây dựng ứng dụng) được sử dụng nhiều hơn.
2.4.2.5 Dependency Injection
Dependency Injection làm cho ứng dụng Angular dễ dàng hơn để phát triển, có thể sắp xếp mã (code) thành các module. Bằng cách này, chúng ta có thể tạo ra các thành phần tái sử dụng mà có thể được gọi về sau, bất cứ khi nào cần thiết. Ý tưởng này là đặc biệt tốt khi ứng dụng lớn và cần phải được mở rộng, dễ dàng bảo trì và testing. Dependency Injection là một cách để ghép các đoạn code với nhau, điều này đòi hỏi phải phân chia code theo các chức năng riêng biệt như service, controller, hoặc provider. 2.4.2.6 Services
Service trong AngularJS là một object hoặc một function phụ trách một tác vụ nào đó. Việc viết service chỉ là việc gom các đoạn xử lý logic vào object hoặc function để dễ quản lý hơn. Cũng giống như mô hình MVC tách phần xử lý, điều hướng và hiển thị riêng biệt.
<script type="text/ng-template" id="message.html"> <h3>Hello, {{name}}!</h3>
</script>
message.html
<web-app>
<display-name>Music Manager</display-name>
index.html <!DOCTYPE html> <html> <head> <script src="http://code.angularjs.org/1.2.12/angular.min.js"> </script> </head> <body>
<div ng-controller="ExampleCtrl">
<div ng-include src="message.html"></div> </div>
</body> </html>
46 Trong AngularJS service sẽ chứa tất cả các phần xử lý, controller nhận yêu cầu và gọi các service cần thiết để xử lý, model lưu trữ dữ liệu từ các control, view hiển thị dữ liệu, route điều hướng request tới controller. (adsbygoogle = window.adsbygoogle || []).push({});
AngularJS cũng xây dựng rất nhiều service vô cùng tiện lợi như: $http, $scope, $window,…
2.4.2.7 Expression
Expression được sử dụng trong tất cả các phần của AngularJs, expression được bao bởi kí hiệu {{ }}. Một biến được khởi tạo từ controller thông qua $scope cũng được coi là một expression.
Expression được xử lý bởi $parse service.
Ví dụ: <body> 2 + 2 = {{2 + 2}} </body>. Angular sẽ tính toán giá trị trong biểu thức và xuất ra màn hình kết quả “2 + 2 = 4”.
2.4.2.8 Fillters
Trong AngularJS, một filter cung cấp một định dạng dữ liệu để hiển thị tới người dùng. AngularJS cung cấp một số filter được xây dựng sẵn như: lowercase, date, number, currency, limitTo, orderBy… Một số fillter như:
Kết quả:
2.4.2.9 Scope
Scope là đối tượng tham chiếu tới model được sử dụng trong controller. Là thành phần gắn kết giữa view và controller. Scope cung cấp các APIs để theo dõi các thay đổi của model (services $watch) và các APIs để truyền bất kỳ thay đổi nào của model tới view (services $apply). Scope giúp tự động đồng bộ dữ liệu giữa model và view.
2.5 MONGODB
2.5.1 Tổng quan về NoSQL
2.5.1.1 NoSQL
NoSQL là một dạng CSDL mã nguồn mở không sử dụng T - SQL để truy vấn thông tin. NoSQL viết tắt cho từ None - Relational SQL, hay có nơi thường gọi là Not - Only SQL.
{{ "chuỗi kí tự viết thường" | uppercase }} {{ {name: "An", age: 22} | json }}
{{ 1504375948024 | date }}
{{ 1504375948024 | date:"MM/dd/yyyy @ h:mma" }}
CHUỖI KÍ TỰ VIẾT THƯỜNG { "name": "An", "age": 22 } March 23, 2015
47 NoSQL được phát triển trên Javascript Framework với kiểu dữ liệu là JSON và dạng dữ liệu theo kiểu key và value (một đặc trưng về dữ liệu trong JSON). NoSQL ra đời như một mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ (RDBMS) về tốc độ, tính năng, khả năng mở rộng, memory cache,...
Chắc hẳn, chúng đã sử dụng một dạng CSDL quan hệ nào đó có thể là SQL Server, MySQL và không ít lần phải vất vả trong việc chỉnh sửa các bảng dữ liệu khi liên quan tới khóa chính, khóa ngoại hay một loạt các rắc rối khác trong quá trình làm việc. Bởi đó là CSDL quan hệ.
Với NoSQL chúng ta có thể mở rộng dữ liệu mà không lo tới những việc như tạo khóa ngoại, khóa chính, kiểm tra ràng buộc, .v.v...Vì NoSQL không hạn chế việc mở rộng dữ liệu nên tồn tại nhiều nhược điểm như: sự phục thuộc của từng bản ghi, tính nhất quán, toàn vẹn dữ liệu,....nhưng chúng ta có thể chấp nhận những nhược điểm đó để khiến ứng dụng cải thiện hiệu suất cao hơn khi giải quyết những bài toán lớn về hệ thống thông tin, phân tán hay lưu trữ dữ liệu.
Với các CSDL quan hệ, chi phí triển khai cũng như phát triển các ứng dụng sử dụng CSDL quan hệ cũng rất tốn kém và điều quan trọng được bộc lộ rõ khi truy vấn một lượng bản ghi lớn trong thời gian rất dài. Tiếp đó những thiết bị cầm tay như smartphone thì không phù hợp để triển khai CSDL quan hệ vì dung lượng bộ nhớ thấp và khả năng xử lý kém hơn máy tính. Và còn rất nhiều lí do khác nữa để chúng ta quyết định việc áp dụng NoSQL vào trong dự án của mình.
NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn, ví dụ như FaceBook sử dụng Cassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable. 2.5.1.2 Các dạng NoSQL cơ bản
2.5.1.2.1 Key – value
Dữ liệu lưu dưới dạng cặp key – value. Giá trị được truy xuất thông qua key. Ví dụ như Redis, Dynomite, Project Voldemort. Thường được sử dụng cho “content caching applications”. Ưu điểm là tìm kiếm rất nhanh tuy nhiên dữ liệu không theo khuôn dạng (schema) nhất định.
2.5.1.2.2 Column-based
Cơ sở dữ liệu tổ chức dưới dạng các bảng. Gần giống với mô hình RDBMS. Tuy nhiên, chúng lưu dữ liệu bởi các cột chứ không phải bằng các dòng. Nó khá thích hợp để hiển thị bằng các phần mềm quản lý kho dữ liệu. Ví dụ như Apache Hbase, Apache Cassandra, Hypertable. Được sử dụng cho các hệ phân tán file. Ưu điểm là tìm kiếm nhanh, phân tán dữ liệu tốt tuy nhiên có rất ít phần mềm hổ trợ.
2.5.1.2.3 Document-based
Dữ liệu được lưu trữ và tổ chức dưới dạng một tập hợp các document. Các document này linh hoạt, mỗi document có một tập nhiều trường. Ví dụ như Apache CouchDB, MongoDB. Thường dùng trong các ứng dụng web. Ưu điểm dùng khi dữ liệu nguồn không được mô tả đầy đủ. Nhược điểm hiệu năng truy vấn, không có cú pháp chuẩn cho câu truy vấn dữ liệu.
48 (adsbygoogle = window.adsbygoogle || []).push({});
2.5.1.2.4 Graph-based
Những CSDL này áp dụng lý thuyết đồ thị trong khoa học máy tính để lưu trữ và truy xuất dữ liệu. Chúng tập trung vào tính rời rạc giữa các phần dữ liệu. Các phần tử đơn vị dữ liệu được biểu thị như một nút và liên kết với các thành phần khác bằng các cạnh. Ví dụ : Neo4j, InfiniteGraph, DEX. Thường dùng cho Social networking, hệ trợ giúp. Có ưu điểm là ứng dụng các thuật toán trên đồ thị như đường đi ngắn nhất, liên thông. Nhược điểm là phải duyệt nội bộ đồ thị để trả lời lại các truy vấn. Không dễ để phân tán.
2.5.2 MongoDB
2.5.2.1 Tổng quan
MongoDB là một hệ CSDL mã nguồn mở được phát triển và hỗ trợ bởi 10gen, là CSDL NoSQL hàng đầu được hàng triệu người sử dụng.
Thay cho việc lưu trữ dữ liệu dưới dạng bảng và các tuple như trong các CSDL quan hệ thì MongoDB lưu trữ dữ liệu dưới dạng BSON (dạng binary từ một JSON document). BSON hổ trợ các kiểu dữ liệu cơ bản như boolean, integer, float, date, string,… [5, tr7]
Dự án được bắt đầu triển khai vào tháng 10 năm 2007 bởi 10gen trong khi công ty này đang xây dựng một nền tảng như là dịch vụ (Platform as a Service) giống như Google App Engine. Phải đến năm 2009, dự án này được tách độc lập. MongoDB có thể chạy trên Windows, Linux, OS X và Solaris.
2.5.2.2 Ưu điểm
Dễ học, có một số nét khá giống với CSDL quan hệ, quản lý bằng command - line hoặc bằng GUI như RoboMongo, RockMongo hoặc phpMoAdmin.
Linh động, không cần phải định nghĩa cấu trúc dữ liệu trước khi tiến hành lưu trữ nó, rất tốt khi ta cần làm việc với các dạng dữ liệu không có cấu trúc.
Khả năng mở rộng tốt (distributed horizontally), khả năng cân bằng tải cao, tích hợp các công nghệ quản lý dữ liệu vẫn tốt khi kích thước và thông lượng trao đổi dữ liệu tăng.
Mã nguồn mở và miễn phí. 2.5.2.3 Kiến trúc tổng quát
Một MongoDB Server sẽ chứa nhiều database. Mỗi database lại chứa một hoặc nhiều colection. Đây là một tập các documnents, về mặt logic thì chúng gần tương tự như các table trong CSDL quan hệ. Tuy nhiên, điểm hay ở đây là ta không cần phải định nghĩa trước cấu trúc của dữ liệu trước khi thao tác thêm, sửa dữ liệu… Một document là một đơn vị dữ liệu – một bản ghi (không lớn hơn 16MB). Mỗi document lại chứa một tập các trước hoặc các cặp key – value. Key là một chuỗi ký tự, dùng để truy xuất giá trị dạng: string, integer, double, … Bảng dưới đây đưa ra một so sánh giữa các thành phần trong một RDBMS và MongoDB
Bảng 2-2: So sánh các thành phần giữa RDBMS và MongoDB
49
Database Database
Table Collection
Tuple/Row Document
Column Field
Table join Embedded documents
Primary key Primary Key ( _id là khóa primary key mặc định) Dưới đây là một ví dụ về MongoDB document:
2.6 BOOTSTRAP VÀ RESPONSIVE
Bootstrap là front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Bootstrap bao gồm HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các button và các thành phần giao diện khác, cũng như mở rộng tùy chọn JavaScript.
Boostrap định nghĩa sẵn các class CSS giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian. Các thư viện Bootstrap có những đoạn mã sẵn sàng cho chúng ta áp dùng vào website của mình mà không phải tốn quá nhiều thời gian để tự viết.
Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát triển giao diện website đang rất được ưu chuộng hiện nay. Bootstrap cung cấp tính năng responsive và mobile first, nghĩa là làm cho trang web có thể tự co giãn để tương thích với mọi thiết bị khác nhau, từ điện thoại di động đến máy tính bảng, máy tính xách tay, máy tính để bàn,...
Một khía cạnh khác là responsive web design làm cho trang web cung cấp được trải nghiệm tuyệt vời cho người dùng trên nhiều thiết bị, kích thước màn hình khác nhau. Đây là một đặc điểm vô cùng quan trọng vì chúng ta không thể lường trước được các thiết bị, kích thước màn hình sẽ sử dụng để truy cập vào trang web. Một trang có thể hoạt động tốt bất kể sự biến đổi sẽ cung cấp một trải nghiệm người dùng tốt và nhất quán hơn một trang được thiết kế cho một loại thiết bị và kích thước màn hình cụ thể.
{
"_id" : ObjectId("54b090b1fe90b289da2ac6b8"), "firstName" : "An", "lastName" : "Nguyen", "age" : 22, "sex" : "male", "lastUpdate" : ISODate("2015-03-07T06:39:57.780Z") }
50
Chương 3 THIẾT KẾ VÀ CÀI ĐẶT CHƯƠNG TRÌNH 3.1 MÔ HÌNH ỨNG DỤNG (adsbygoogle = window.adsbygoogle || []).push({});
Nhằm mục đích áp dụng các lý thuyết cũng như các kỹ thuật đã nêu ở phần trên, chúng tôi sẽ phân tích và cài đặt một ứng dụng quản lý nhạc trên nền web.
Ứng dụng được xây dựng theo mô hình sau (Hình 3-1).
Chúng tôi sẽ chia ứng dụng thành 2 module lớn: Module server và module client. Module server sẽ chịu trách nhiệm tương tác với database. Module client bao gồm việc xây dựng các API dưới dạng RESTful web service và giao diện người dùng trên browser. Việc giao tiếp qua lại giữa client và server sẽ được cài đặt theo mô hình một Messaging System. Sơ đồ trang tiếp theo ở trang tiếp theo sẽ cho thấy mô hình chi tiết và luồng thực thi của ứng dụng.