TÌM HIỂU ANGULARJS VÀ ÁP DỤNG XÂY DỰNG WEBSITE SINGLE PAGE APPLICATION BÁN ĐIỆN THOẠI DI ĐỘNG - Full 10 điểm

O9 TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA CÔNG NGHỆ THÔNG TIN -----  ----- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC TÌM HIỂU ANGULARJS VÀ ÁP DỤNG XÂY DỰNG WEBSITE SINGLE PAGE APPLICATION BÁN ĐIỆN THOẠI DI ĐỘNG Sinh viên thực hiện NGUYỄN VĂN HẢO MSSV: 2112011004 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA 2012 – 2016 Giảng viên hướng dẫn ThS DƯƠNG PHƯƠNG HÙNG Qu ả ng Nam, tháng 4 n ă m 2016 LỜI CẢM ƠN Được sự phân công của Khoa Công nghệ thông tin - Trường Đại học Quảng Nam, và sự đồng ý của Thầy giáo hướng dẫn ThS Dương Phương Hùng em đã thực hiện đề tài “Tìm hi ể u AngularJS và áp d ụ ng xây d ự ng website single page application bán đ i ệ n tho ạ i di độ ng” Để hoàn thành khóa luận này, em xin chân thành cảm ơn các thầy cô giáo đã tận tình hướng dẫn, giảng dạy trong suốt quá trình học tập, nghiên cứu và rèn luyện ở Trường Đại học Quảng Nam Xin chân thành cảm ơn Thầy giáo hướng dẫn ThS Dương Phương Hùng đã tận tình, chu đáo hướng dẫn tôi thực hiện khóa luận này Mặc dù đã có nhiều cố gắng để thực hiện đề tài này một cách hoàn chỉnh nhất Song do buổi đầu mới làm quen với công tác nghiên cứu khoa học cũng như vẫn còn nhiều hạn chế về kiến thức và kinh nghiệm nên không tránh khỏi những thiếu sót nhất định mà bản thân chưa thấy được Em rất mong được sự góp ý của quý Thầy, Cô giáo và các bạn đồng nghiệp để khóa luận được hoàn chỉnh hơn Em xin chân thành cảm ơn! Qu ả ng Nam, ngày 10 tháng 4 n ă m 2016 Sinh viên Nguyễn Văn Hảo i MỤC LỤC DANH MỤC TỪ VIẾT TẮT v DANH MỤC HÌNH VẼ vi NỘI DUNG ĐỀ TÀI 1 Phần 1 MỞ ĐẦU 1 1 Lý do chọn đề tài 1 2 Mục đích nghiên cứu 1 3 Đối tượng và phạm vi nghiên cứu 1 4 Phương pháp nghiên cứu 2 5 Lịch sử nghiên cứu 2 6 Đóng góp của đề tài 2 7 Cấu trúc của khóa luận 2 Phần 2 NỘI DUNG NGHIÊN CỨU 4 Chương 1: TỔNG QUAN VỀ ANGULARJS FRAMEWORK 4 1 1 Ngôn ngữ lập trình web JavaScript 4 1 1 1 Lịch sử phát triển 4 1 1 2 JavaScript là gì? 4 1 1 3 JavaScript có thể làm những gì? 4 1 2 Tổng quan về AngularJS 4 1 2 1 Lịch sử phát triển 4 1 2 2 AngularJS là gì? 6 1 2 3 Các tính năng chính 6 1 2 4 Đặc trưng 9 ii 1 2 5 Mô hình MVC 9 1 2 6 Single Page Application – SPA 10 1 2 7 Tổng kết chương 1 11 Chương 2: ANGULARJS FRAMEWORK 12 2 1 Tại sao phải sử dụng AngularJS? 12 2 2 AngularJS được lập trình như thế nào? 12 2 2 1 Cài đặt AngularJS 12 2 2 2 Chương trình đầu tiên 13 2 3 Các thành phần của AngularJS 14 2 3 1 Angular Template 14 2 3 2 Modules 16 2 3 3 Scope 19 2 3 4 Model 20 2 3 5 Controller 20 2 3 6 Expression (Biểu thức) 21 2 3 7 Filters (Bộ lọc) 22 2 3 8 Directives 23 2 3 9 Services 25 2 3 10 Multiple View and Routing 27 2 3 11 Form validation 29 2 4 Tổng kết chương 2 31 Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG BÁN ĐIỆN THOẠI DI ĐỘNG 32 3 1 Khảo sát hệ thống hiện tại 32 3 1 1 Tổng quan về tổ chức 32 3 1 2 Chức năng và nhiệm vụ của tổ chức 32 iii 3 1 3 Mục tiêu của tổ chức 32 3 1 4 Cơ cấu tổ chức 32 3 2 Các yêu cầu của hệ thống 32 3 2 1 Yêu cầu của khách hàng 32 3 2 2 Yêu cầu của quản lý và chủ cửa hàng 33 3 3 Biểu đồ ca sử dụng (Use case) của hệ thống 33 3 3 1 Tác nhân của hệ thống 33 3 3 2 Ca sử dụng của hệ thống 33 3 3 3 Biểu đồ ca sử dụng của hệ thống 34 3 4 Mô hình cấu trúc của hệ thống 34 3 4 1 Các lớp thực thể 34 3 4 2 Biểu đồ lớp thực thể của hệ thống 36 3 4 3 Các lớp biên của hệ thống 37 3 4 4 Các lớp điều khiển 38 3 5 Mô hình hành vi của hệ thống 38 3 5 1 Biểu đồ tuần tự 38 3 5 2 Biểu đồ hoạt động 40 3 6 Cơ sở dữ liệu của hệ thống 43 3 6 1 Lớp thực thể và các phương thức 43 3 6 2 Mô hình quan hệ 44 3 7 Biểu đồ định hướng giao diện người dùng 44 3 8 Tổng kết chương 3 46 Chương 4: ÁP DỤNG CÔNG NGHỆ ANGULAR JS ĐỂ XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI DI ĐỘNG 47 4 1 Một số chức năng cơ bản 47 4 2 Giao diện trang web 47 iv 4 3 Kết luận chương 4: 50 Phần 3 KẾT LUẬN 51 Phần 4 TÀI LIỆU THAM KHẢO 52 v DANH MỤC TỪ VIẾT TẮT Tên viết tắt Tên đầy đủ API Application Programming Interface CSS Cascading Style Sheets DOM Document Object Model HTML HyperText Markup Language UNIX Uniplexed Information and Computing System WWW World Wide Web vi DANH MỤC HÌNH VẼ Hình 1 1: JavaScript: The goog parts và JavaScript: The definitive guide 5 Hình 1 2: Các thành phần quan trọng của AngularJS 8 Hình 1 3: Sự khác biệt giữa one-way databinding và two-way databinding của AngularJS 9 Hình 1 4: Mô hình MVC 9 Hình 1 5: Mô hình MVC và MVW của AngularJS 10 Hình 1 6: Mô hình website Single Page Application 11 Hình 2 1: Module trong AngularJS 16 Hình 2 2: $rootScope 20 Hình 2 3: Một số các Directives quan trọng trong ứng dụng AngularJS 23 Hình 2 4: Ví dụ về Form validation 30 Hình 3 1: Biểu đồ Use Case của hệ thống 34 Hình 3 2: Biểu đồ lớp thực thể của hệ thống 36 Hình 3 3: Biểu đồ tuần tự cho ca sử dụng Đăng nhập 38 Hình 3 4: Biểu đồ tuần tự cho ca sử dụng Mua hàng 39 Hình 3 5: Biểu đồ tuần tự cho ca sử dụng Tìm kiếm sản phẩm 39 Hình 3 6: Biểu đồ tuần tự cho ca sử dụng Thêm/Sửa sản phẩm 40 Hình 3 7: Biểu đồ hoạt động của phương thức dangKyKhachHang 40 vii Hình 3 8: Biểu đồ hoạt động của phương thức suaThongTinKhachHang 41 Hình 3 9: Biểu đồ hoạt động của phương thức muaSanPham 41 Hình 3 10: Biểu đồ hoạt động của phương thức suaThongTinSanPham 42 Hình 3 11: Lớp thực thể và các phương thức của hệ thống 43 Hình 3 12: Mô hình quan hệ của hệ thống 44 Hình 3 13: Biểu đồ định hướng người dùng cho ca sử dụng Mua Hàng 45 Hình 3 14: Biểu đồ định hướng người dùng cho ca sử dụng Quản lý kho 45 Hình 3 15: Biểu đồ định hướng người dùng cho ca sử dụng Cập Nhập Sản Phẩm 46 Hình 4 1: Trang chủ của trang web 47 Hình 4 2: Trang Đăng nhập 48 Hình 4 3: Trang giỏ hàng 48 Hình 4 4: Trang thanh toán 49 Hình 4 5: Trang cập nhập sản phẩm 49 1 Phần 1 MỞ ĐẦU 1 Lý do chọn đề tài Sự phát triển của công nghệ thông tin và việc ứng dụng công nghệ thông tin trong các lĩnh vực của đời sống, kinh tế, xã hội trong nhiều năm qua đặc biệt là trong thương mại đã thôi thúc các doanh nghiệp có sự đầu tư lớn vào trong lĩnh vực thương mại điện tử Sự tiện ích luôn đặt lên hàng đầu nên giao diện và nội dung của trang web phải thật nổi bật có thể thu hút được khách hàng Bên cạnh đó dung lượng cũng là một vấn đề đối với khách hàng trực tuyến Một số trang web truyền thông hiện nay chủ yếu sử dụng nhiều trang web dưới dạng mã HTML, hầu như chúng không có liên kết nào giữa hai yêu cầu khác nhau, do đó việc xử lý hay load trang sẽ lâu hơn Trong khi đó đối với Single Page Application chỉ với lần yêu cầu đầu tiên thì hệ thống sẽ trả về tất cả code xử lý cũng như code hiển thị của toàn bộ trang web, và người dùng chỉ cần yêu cầu những phần mình cần, giúp rút ngắn việc tải trang, trải nghiệm các hiệu ứng của trang web, quá trình thao tác dữ liệu không khác gì với ứng dụng desktop Chính vì những lý do trên, tôi đã chọn đề tài “Tìm hi ể u AngularJS và áp d ụ ng Angular JS xây d ự ng website single page application bán đ i ệ n tho ạ i di độ ng” để làm luận văn tốt nghiệp 2 Mục đích nghiên cứu - Nắm vững những kiến thức cơ bản về AngularJS - Áp dụng AngularJS vào xây dựng một trang website single page application bán điện thoại di động - Cách đưa một trang web lên server để được sử dụng 3 Đối tượng và phạm vi nghiên cứu - Các kỹ thuật Single Page Application - Sử dụng AngularJS trong xây dựng Website Single Page Application 2 4 Phương pháp nghiên cứu - Tìm đọc tài liệu, giáo trình, luận văn, bài báo, thông tin trên mạng - Phân tích, tổng hợp tài liệu 5 Lịch sử nghiên cứu Với vấn đề về AngularJS thì cũng đã được nhiều tác giả phân tích, nghiên cứu theo nhiều hướng khác nhau 6 Đóng góp của đề tài Đề tài được nghiên cứu nhằm trình bày những kiến thức cơ bản và tổng quan về công nghệ AngularJS Xây dựng website bán điện thoại di động bằng cách áp dụng AngularJS 7 Cấu trúc của khóa luận Lời cảm ơn Mục lục Danh mục các ký hiệu, các chữ viết tắt Danh mục các hình vẽ, đồ thị MỞ ĐẦU 1 Lý do chọn đề tài 2 Mục đích nghiên cứu 3 Đối tượng và phạm vi nghiên cứu 4 Phương pháp nghiên cứu 5 Lịch sử nghiên cứu 6 Đóng góp của đề tài NỘI DUNG NGHIÊN CỨU Ch ươ ng 1: T ổ ng quan v ề AngularJS Framework Ch ươ ng 2: AngularJS Framework Ch ươ ng 3: Phân tích và thi ế t k ế h ệ th ố ng bán đ i ệ n tho ạ i di độ ng Ch ươ ng 4: Áp d ụ ng công ngh ệ AngularJS để xây d ự ng website bán đ i ệ n tho ạ i di độ ng 3 KẾT LUẬN TÀI LIỆU THAM KHẢO 4 Phần 2 NỘI DUNG NGHIÊN CỨU Chương 1: TỔNG QUAN VỀ ANGULARJS FRAMEWORK 1 1 Ngôn ngữ lập trình web JavaScript 1 1 1 Lịch sử phát triển JavaScript được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên là Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript JavaScript được bổ sung vào trình duyệt Netscape v2 0b3 phát hành tháng 12 năm 1995 JavaScript được bổ sung vào trình duyệt Internet Explorer v3 0 vào tháng 8 năm 1996 1 1 2 JavaScript là gì? JavaScript là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được sử dụng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong ứng dụng 1 1 3 JavaScript có thể làm những gì? Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader Điều khiển Dashboard trên hệ điều hành Mac OS X v10 4 cũng có sử dụng JavaScript 1 2 Tổng quan về AngularJS 1 2 1 Lịch sử phát triển AngularJS là một dự án mã nguồn mở được phát triển đầu tiên của bởi Misko Hevery, một nhân viên của Google vào năm 2009 khi đã rút ngắn số 5 dòng code front-end từ 17000 dòng còn khoảng 1500 Với sự thành công đó thì Google quyết định phát triển AngularJS theo hướng mã nguồn mở và phiên bản 1 0 được cho ra mắt năm 2012 Công nghệ HTML hỗ trợ tốt cho các trang web tĩnh, kiểu như trước năm 2000 vậy Khi xây dựng 1 trang web bằng PHP, Node/Express hay Ruby thì nó cũng chỉ là một trang web tĩnh với nội dung được thay đổi khi bạn gửi request về máy chủ, máy chủ sẽ render 1 trang với nội dung tương ứng Tuy nhiên mọi thứ đã thay đổi với sự xuất hiện của HTML5, nhất là có sự hỗ trợ từ các ông lớn như Google, Yahoo và tập hợp đông đảo của cộng đồng mã nguồn mở Douglas Crockford, người được biết đến nhiều qua JSON và JSLint đã dùng sự chênh lệch về độ dày giữa 2 cuốn sách “JavaScript: The definitive guide” và “JavaScript: The goog parts” để châm biếm 1 cách hài hước về JavaScript Hình 1 1: JavaScript: The goog parts và JavaScript: The definitive guide Tuy nhiên, sự thành công của jQuery đã khiến JavaScript được nhiều người yêu thích vì tính đơn giản và dễ sử dụng Việc phát triển một website sử dụng AJAX thì không khó, bạn có thể sử dụng jQuery để làm việc này với $ ajax tuy nhiên làm thế nào để xây dựng một phần mềm có thể mở rộng, đã test, nâng cấp và bảo trì thì không hề đơn giản chút nào vì bản thân JavaScript không được thiết kế ngay từ đầu để làm những việc này Do đó sự ra đời của những Framework hỗ trợ lập trình viên xây dựng ứng dụng web một cách có 6 hệ thống đã ra đời như Sencha, Ember, Knockuot, Backbone, và đặc biệt là AngularJS 1 2 2 AngularJS là gì? AngularJS là framework JavaScript mã nguồn mở và hoàn toàn miễn phí Angular tăng cường HTML cho các ứng dụng web Nó có chức năng giảm bớt quá trình phát triển web Từ nhiều năm trước, khi HTML mới bắt đầu, nó được dự định để xây dựng trang web hoặc có thể nói đó là một cách để hiển thị tài liệu tĩnh, không có xây dựng một ứng dụng web động Bây giờ, hãy tưởng tượng HTML lần đầu tiên được sử dụng để xây dựng các ứng dụng web động, đó là Angular Angular là những gì HTML sẽ có được nếu nó được thiết kế để xây dựng các ứng dụng web 1 2 3 Các tính năng chính Hai cách liên kết dữ liệu trong AngularJS là khả năng thay đổi giá trị thuộc tính của đối tượng, đồng thời giao diện người dùng đưa ra sự thay đổi đó ngay tại thời điểm đó, và ngược lại Ví dụ, nếu bạn có thuộc tính của một đối tượng gọi là “Page Title”, mỗi lần thay đổi giá trị “Page Title”, giao diện người dùng tự động cập nhật và hiển thị giá trị mới của “Page Title” Và nếu bạn nhập vào trong giao diện ứng dụng người dùng của bạn, nó có thể cập nhât giao diện người dùng và cũng cập nhật thuộc tính của đối tượng Tất cả đều được xử lý bởi AngularJS do đó không cần phải viết giống như trong một số framework JavaScript khác Những gì cần làm đơn giản là xác định model của chúng ta, và bây giờ bất cứ khi nào một model được thay đổi, nó sẽ thay đổi bất cứ nơi nào nó được đặt, có thể là trong đối tượng cụ thể hoặc trong các lớp đại diện Model trong Angular chỉ là cấu trúc JavaScript cũ rõ ràng, không có gì là lạ mắt nhưng nó lại rất hữu ích Tính năng mới thực sự là đặc điểm tạo nên một khoảng cách khác nhau lớn giữa Angular và bất kỳ framework javascript khác Directives là đề cập đến một tính năng để mở rộng nghĩa của từ HTML, đồng thời cũng có thể được xem như là một cách để chỉ cho trình duyệt mẹo mới của bạn Chúng ta 7 biết về header trong HTML5, đó là đại diện cho một tiêu đề nhưng nó chỉ là phần tử tĩnh Mặc dù HTML có thể có nhiều thẻ, nhưng nó không đủ mạnh để tạo ra một ứng dụng web đẹp Với đặc điểm chỉ dẫn, chúng ta có thể tạo ra từ vựng HTML mới để trình duyệt hiểu nó có nghĩa là gı̀ và nó nên làm gı̀ Ví dụ với Angular chúng ta có thể tạo ra thẻ như sau drag me Các văn bản bên trong tag 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 chỉ dẫn draggable trong ứng dụng Angular của chúng ta là xong Đây là một ví dụ đơn giản của Angular, nó có thể làm rất nhiều thứ hữu ích hơn Và nó không chỉ giới hạn một phần tử html mà có sẵn để thực thi các thuộc tính, các lớp hoặc các chú thích html Directives trong Angular khác với directtives tạo bởi html ở chỗ chúng có thể thực hiện nhiều hành vi động hơn Nhiều framework cần có template nhưng Angular template chỉ là HTML Dependency injection làm cho ứng dụng Angular dễ dàng hơn để phát triển, chúng ta 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ử dụng mà có thể được gọi về sau, bất cứ khi nào cần thiết Ý tưởng này là đặc biệt tốt là khi ứng dụng mở rộng lớn hơn và cần phải được mở rộng, dễ dàng bảo trì và kiểm chứng Dependency injection là một cách để ghép các đoạn mã code với nhau, điều này đòi hỏi phải phân chia mã code theo các chức năng riêng biệt như service, controller, hoặc provider nhưng không giới hạn chúng Sau đây là các tính năng cố lõi quan trọng trong AngularJS:  Data-binding : (Liên kết dữ liệu) Tự động đồng bộ dữ liệu giữa model view  Scope : (Phạm vi) Đây là những hàm đối tượng kết nối giữa Controller và View  Controller : Đây là những hàm javascript xử lý kết hợp với bộ điều khiển Scope 8  Service : AngularJS sử dụng các API được xây dựng từ các web service (PHP, ASP) để thao tác với Database  Filters : Bộ lọc lọc ra các thành phần của một mảng và trả về mảng mới  Directives : Đánh dấu các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ HTML tùy chỉnh  Templates : Hiển thị thông tin từ Controller, đây là một thành phần của views  Routing : Chuyển đổi giữa các Action trong Controller  MVC : Mô hình chia thành phần riêng biệt thành Model, View, Controller Đây là một mô hình khá hay nhưng trong Angular thì nó được chế biến lại một chút gần giống với MVVM (Model View View Model)  Deep Linking : Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm  Dependency Injection : Angular giúp các nhà phát triển tạo ứng dụng dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng Hình 1 2: Các thành ph ầ n quan tr ọ ng c ủ a AngularJS 9 1 2 4 Đặc trưng Một số các đặc trưng của AngularJS: Kiến trúc MVC, Two-way binding, Dynamic templates, Expressions, Modules, Scopes, Dependency injection, Directives, Routing, Services, Filters, Form validation, Testing in mind Hình 1 3: S ự khác bi ệ t gi ữ a one-way databinding và two-way databinding c ủ a AngularJS 1 2 5 Mô hình MVC Hình 1 4: Mô hình MVC Mô hình MVC (Model-View-Controller) là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm Nó giúp cho các developer tách ứng dụng của họ thành 3 thành phần khác nhau là Model (Xử 10 lý, truy xuất dữ liệu), View (Giao diện), Controller (Điều hướng yêu cầu người dùng) MVC thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế Do được chia thành các phần độc lập nên giúp phát triển web rất nhanh, đơn giản, dễ nâng cấp, bảo trì Trong Angular thì View sẽ là DOM, Controller là các lớp JavaScript, còn Model sẽ là dữ liệu được lưu ở thuộc tính của các đối tượng trong JS Sau khi chứng kiến nhiều sự tranh luận về MV*, một tác giả của AngularJS đã tuyên bố AngularJS là một MVW framework (Model-View- Whatever, trong đó Whatever là viết tắt của whatever works for you) Hình 1 5: Mô hình MVC và MVW c ủ a AngularJS 1 2 6 Single Page Application – SPA Một single page application hay còn gọi là single page interface, là một web app hay website hiển thị vừa vặn trên một mặt của trang web với mục đích giúp người dùng có trải nghiệm giống như đang dùng ứng dụng trên desktop Là ứng dụng chạy bên trong trình duyệt, không yêu cầu phải tải lại trang web mỗi lần sử dụng 11 Hình 1 6: Mô hình website Single Page Application 1 2 7 Tổng kết chương 1 AngularJS vẫn còn khá mới đối với các lập trình viên ở Việt Nam Qua chương 1, tôi đã giới thiệu đôi nét tổng quan về AngularJS Biết về lịch sử, các tính chất đặc trưng cơ bản của Angular Và để hiểu rõ hơn về AngularJS, tôi sẽ trình bày ở chương 2 một cách cụ thể 12 Chương 2: ANGULARJS FRAMEWORK 2 1 Tại sao phải sử dụng AngularJS? Angular được đưa ra bởi Google Tại sao điều này quan trọng để biết? Như bạn có thể đoán, Google đã phát triển các tài năng và thiên tài như đội bóng của họ Họ thực sự biết những tinh tế của trang web và những sự phát triển ứng dụng website Ít nhất là thực tế này có thể cung cấp cho người dùng đảm bảo Angular xuất phát từ người chúng ta có thể tin tưởng Ngoài ra, nếu bạn đã sử dụng sản phẩm của Google như là Gmail hay Google+, bạn sẽ thấy không ngạc nhiên với sự tương tác của chúng và cả ajax gửi liên tục mọi nơi mà không phải làm mới toàn bộ trang web và để sử dụng Angular kiến thức chủ yếu cần phải biết là JavaScript 2 2 AngularJS được lập trình như thế nào? 2 2 1 Cài đặt AngularJS 2 2 1 1 Tải AngularJS Truy cập vào trang web https://angularjs org hoặc https://github com/angular js và tải bản angularJS mới nhất 2 2 1 2 Chèn Angular vào ứng dụng Tự host AngularJS Theo cách này thì cần phải download AngularJS về máy và nhúng trực tiếp vào ứng dụng Dùng phiên bản có sẵn trên server của Google Ngoài cách trên ta cũng có thể sử dụng phiên bản nén của Angular có sẵn trên server của Google Sử dụng cách này có 2 điều thuận lợi là tiết kiệm băng thông cho trang web của bạn và AngularJS sẽ được load nhanh hơn nếu máy của người dùng đã cache AngularJS Nhưng cách này không hoạt động nếu không được kết nối mạng 13 2 2 2 Chương trình đầu tiên Vı́ dụ AngularJS

Hello {{''''World'''' + ''''!''''}}

1+2={{1+2}}

Vı́ dụ đơn giản về module Trong ví dụ này modules được khai báo ngy trong thẻ với tên là myModule var app = angular module(''''myModule'''',[]); Ng-app=”myModule”: Khai báo một angular app là myModule, sử dụng myModule được khai báo trong script Trong script, angular module() là hàm khai báo cho module Cặp dấu ngoặc [] chính là mảng các module sẽ được nạp chung vào để chạy chung với ứng dụng(module chính được khai báo trong ng-app) Ví dụ: var app = angular module(''''myModule'''', [''''ngRoute'''', ''''ngBootstrap'''']); Controller trong module Trong ví dụ trên chúng ta đã đẩy việc khai báo module như thế nào, vậy controller khi ứng dụng sẽ được khai báo như thế nào Hãy xem ví dụ dưới đây: Index html Hello, {{ name }}! 18 script js var app = angular module(''''ExampleModule'''', []); app controller(''''ExampleController'''', function($scope) { $scope name = ''''World''''; }); Method controller của modules sẽ đóng vai trò khai báo thêm một controller cho module Function đại diện cho controller được khai báo bình thường giống như controller khai báo biên ngoài module AngularJS sử dụng Dependence Injection để tách biệt giữa các modules Các dependency được đưa vào tự động bởi framework Tổ chức của một ứng dụng Angular thực tế: ├── index html ├── css │ └── style css └── scripts ├── module_1 js ├── module_2 js ├── module_3 js └── main js index html chính là html documents style css chính là mã nguồn css cho document main js chính là mã nguồn cho module chính sử dụng, như vậy template của chúng ta sẽ được khai báo lại như sau: index html 19 Hello, Angular''''s Module! main js var app = angular module(''''ExampleModule'''', [''''Module1'''', ''''Module2'''', ''''Module3'''']); app controller(''''ExampleController'''', function($scope) { $scope name = ''''World''''; }); 2 3 3 Scope 2 3 3 1 $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 Khi bạn thêm dữ liệu cho $scope ở controller thì nếu bên view có khai báo theo đúng quy tắc thì nó sẽ tự động gán thông tin vào đúng vị trí đó 20 Ví dụ: Hiển thị username thì ta sẽ khai báo là {{username}} và ở controller ta gán là $scope username=’something’ thì đối tượng này sẽ lấy key có tên là username gán vào view {{username}} Scope cung cấp các APIs để theo dõi các thay đổi của Model: $watch Scope cung cấp các APIs để truyền bất kỳ thay đổi nào của Model tới View: $apply Tự động đồng bộ dữ liệu giữa Model và View 2 3 3 2 $rootScope $rootScope là bậc cao nhất sẽ bao hàm tất cả các $scope bên trong nó, điều này không giống như $scope chỉ có ảnh hưởng trong phạm vi của controller Hình 2 2: $rootScope 2 3 4 Model {{ greeting }} Ng-model cho ta biết đối tượng nhận giá trị của input {{greeting}} sẽ in ra giá trị được nhập vào input 2 3 5 Controller var demo = angular module(''''myApp'''',[]); demo controller(''''GreetingController'''', [''''$scope'''', function($scope) { $scope greeting = ''''Hello World!''''; }]); 21 Tạo một module cho ứng dụng: Đặt biến “demo” chứa module “myApp” của ứng dụng var demo = angular module(''''myApp'''',[]); Tạo một controller mới cho module này: demo controller(''''GreetingController'''', [''''$scope'''', function($scope) { $scope greeting = ''''Hello World!''''; }]); ‘GreetingController’ là tên controller, cách đặt tên nên chứa tên và đuôi “Controller” để dễ nhận biết [''''$scope'''', function($scope) Viết hàm sử dụng với biết $scope $scope greeting = ''''Hello World!'''' ; Gán giá trị cho biến greeting Để in được giá trị của greeting ra trình duyệt {{ greeting}} Ng-controller cho biết controller đang hoạt động Đoạn mã này sẽ in ra trình duyệt chuỗi “Hello World!” được khai báo trong “GreetingController” 2 3 6 Expression (Biểu thức) Expression được sử dụng hầu khắp trong tất cả các phần của AngularJS Expression được sử dụng trong template, trong các thẻ đánh dấu (markup), trong các directives Nó đượ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ác snippets giống JS được đặt trong bindings, kiểu như {{expression}} 22 Được xử lý bởi $parse service Ví dụ: 2+2 = {{2+2}} 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 3 7 Filters (Bộ lọc) Trong Angular, một filter cung cấp một định dạng dữ liệu để hiển thị tới người dùng Theo tinh thần của UNIX filters và sử dụng các cú pháp tương tự | (pipe) Angular cung cấp một số filter được xây dựng sẵn như: lowercase, date, number, currency, limitTo, orderBy Ví dụ: Uppercased: {{ userInput | uppercase }} Khi người nhập dữ liệu vào input thì giá trị đó sẽ được chuyển thành chữ viết thường Một số filter khác: {{ "chuỗi kı́ tự viết thường" | uppercase }} {{ {name: "Sang", age: 21} | json }} {{ 1304375948024 | date }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} Kết quả: CHUỖI KÍ TỰ VIẾT THƯỜNG {“name”: “Sang”, “age”:21} May 3, 2011 05/03/2011 @ 5:39AM 23 2 3 8 Directives Hình 2 3: M ộ t s ố các Directives quan tr ọ ng trong ứ ng d ụ ng AngularJS Những thứ như là thuộc tính, class, tên của một DOM element gọi chung là directive AngularJS sẽ dựa vào chúng để attach các chỉ thị hoặc các sự kiện tới DOM element đó Bản thân AngularJS đã có rất nhiều các directive như: ng-bind, ngmodel, ng-click, ng-controller 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 AngularJS cung cấp cho chúng ta 3 loại directive đó là: Directive dạng element (là 1 thẻ HTML) viết tắt là E Directive dạng attribute ( thuộc tính của 1 thẻ HTML) viết tắt là A, dạng này sử dụng mặc định 24 Directive dạng class (class CSS) viết tắt là C Ví dụ: Vı́ dụ AngularJS AngularJS var app = angular module(''''demoApp'''', []); app controller(''''myController'''', function($scope) { $scope customer = { name: ''''Hao'''', address: ''''Tam Anh Nam, Núi Thành'''' }; }) directive(''''myDirective'''', function() { 25 return { restrict : ''''C'''', template: ''''Name: {{customer name}} Address: {{customer address}}'''' // templateUrl: ''''directive_template html'''' }; }); Trong myCtrl khai báo thông tin customer với name và address Trong myDirective sẽ return ra 1 object còn việc hiển thị hay đổ dữ liệu vào directive như thế nào là việc của Angular, chúng ta không cần quan tâm Lưu ý: Tên directive phải khai báo dạng camelCase còn khi gọi thì có thể dùng dấu “-” để ngăn cách giữa các từ hoặc để nguyên như khi khai báo cũng được restrict: loại directive mặc định là E (element), C là class, A là attribute template: Nội dung của directive templateUrl: Liên kết tới 1 file template bên ngoài Template này chứa nội dung của directive Name: {{customer name}} Address: {{customer address}} Nếu restrict:"A" thì sẽ có dữ liệu Nếu restrict:"C" thì sẽ có dữ liệu Nếu restrict:"E" thì sẽ có dữ liệu Khi thay đổi restrict cần lưu ý infect element để xem nó đổ dữ liệu vào thẻ nào 2 3 9 Services AngularJS service 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à 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 26 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 handle dữ liệu từ các control, View hiển thị dữ liệu, Route điều hướng request tới controller Bản thân AngularJS cũng chứa những service như: $http, $scope, $window, $RouteProvider Có 2 cách để tạo service trong AngularJS Cách 1: Cú pháp: module service( ''''serviceName'''', function ); Ví dụ: var module = angular module(''''myapp'''', []); module service(''''userService'''', function(){ this users = [''''Hao'''', ''''Nguyen'''', ''''Van'''']; }); Cách 2: Cú pháp: module factory(''''userService'''', function(){ Ví dụ: var fac = {}; fac users = [''''John'''', ''''James'''', ''''Jake'''']; return fac; }); Cả 2 cách đều tạo ra được service Với cách 1 sau khi đăng ký tên service xong bạn sẽ cung cấp 1 thể hiện của function mà bạn truyền vào module service 27 Với cách 2 sau khi đăng ký tên factory, trong function truyền vào trong module factory cần return thể hiện của đối tượng tạo bên trong nó 2 3 10 Multiple View and Routing Đôi khi trong một trang, nhiều khi chúng ta chỉ muốn hiển thị một phần HTML ứng với mỗi chức năng cụ thể mà ta không cần chuyển đổi trang, Angular là một full-stack framework hiệu quả giúp chúng ta có thể làm được việc này nhanh chóng và dễ dàng Route là bộ điều hướng các yêu cầu từ phía người dùng tới các controller tương ứng để xử lý dựa theo các đối số truyền trên thanh url Route trong AngularJS là thành phần quan trọng giúp AngularJs tạo được ứng dụng SPA, chuyển trang mà không cần tải lại trı̀nh duyệt Trong AngularJs chúng ta sẽ sử dụng $routeProvider để bắt các yêu cầu Biểu thức route được tính từ sau dấu # Ví dụ: Vı́ dụ AngularJS Từ phiên bản AngularJS 1 0 7 thì Route đã được tách thành một file js riêng biệt, và để sử dụng được nó ta phải nhúng file angular-route min js vào ứng dụng 28 Directive ng-view được sử dụng để hiển thị dữ liệu Đăng ký biến app thành một module trong AngularJS và thiết lập route cơ bản Để làm việc với Route thı̀ bạn cần gọi và sử dụng một extends module của angular là ngRoute var app = angular module(''''demoApp'''', [''''ngRoute'''']); app config([''''$routeProvider'''', function($routeProvider){ $routeProvider when(''''/, { templateUrl : index html'''', controller : ''''homeController'''' }) when(''''/post/:id'''', { templateUrl : ''''detail html'''', controller : ''''postController'''' }) otherwise({ redirect: ''''/'''' }) }]); App config là method cho phép khai báo các Controller, View tương ứng với url Với route thế này thì khi truy cập vào đường dẫn chính của trang web thì trình duyệt sẽ load file index html và bind nó vào when(''''/post/:id'''', { Trong route tới chi tiết bài đăng có sử dụng $routeParams service dùng để nhận các đối số là id của bài viết, giúp xác định được chính xác bài viết cần hiển thị Đường dẫn truy cập tới chi tiết bài đăng sẽ có dạng #/post/id 29 Trong đó id là id của bài đăng Khi cấu hı̀nh route không cần phải ghi dấu “#” Khi gặp đường dẫn có dạng #/post/id thì route sẽ gọi tới controller là postController và sử dụng template từ file detail html when(''''/post/:id'''', { templateUrl : ''''detail html'''', controller : ''''postController'''' }) $routeProvider otherwise xử lý cho route mặc định Khi đường dẫn không khớp với những route đã được thiết lập thı̀ sẽ được tái điều hướng về trang chủ otherwise({ redirect: ''''/'''' }); 2 3 11 Form validation - Controls (input, select, textarea) là các cách mà người dùng nhập dữ liệu - Form là một tập các controls với mục đích nhóm các controls liên quan với nhau - Form và controls cung cấp các validation services, đẻ người dùng được báo các lỗi liên quan đến nhập dữ liệu - Server-side validation cũng cần thiết để đảm bảo độ an toàn của ứng dụng - Sử dụng thuộc tính “novalidate” để tắt chức năng validation mặc định của trình duyệt CSS Classes: Ng-valid: class được thêm vào phần tử nếu kiểm tra 30 Ng-invalid: class được thêm vào phần tử nếu không kiểm tra Ng-pristine: class được thêm vào phần tử lúc ban đầu, trước khi AngularJS xử lý kiểm tra Ng-dirty: class được thêm vào phần tử khi AngularJS xử lý kiểm tra Custom Validation Angular cung cấp các xử lý cơ bản cho hầu hết các kiểu input HTML5: (text, url, number, email, radio, checkbox) kèm directives để kiểm tra (required, pattern, minlength, maxlength, min, max) Có thể tự đưa ra validate riêng bằng cách tự tạo directive để đưa hàm validate của mình vào ngModel controller Validation có thể xuất hiện ở 2 chỗ: Model to View update: khi Model thay đổi, tất cả các hàm trong NgModelController#$formatters array được pipe – lined, để mỗi hàm này có thể định dạng được giá trị và thay đổi trạng thái valid của form control thông qua NgModelController#$setValidity View to Model update: tương tự như vậy, khi người dùng tương tác với 1 control, nó gọi NgModelController#$setViewValue Nó sẽ pipe – line tất cả các hàm trong NgModelController#$parsers array, để mỗi hàm này lần lượt chuyển đổi giá trị và trạng thái thay đổi của form control thông qua NgModelController#$setValidity Ví dụ: Hình 2 4: Ví d ụ v ề Form validation 31 2 4 Tổng kết chương 2 Thông qua chương 2, tôi đã giới thiệu chi tiết hơn về AngularJS, giới thiệu các thành phần của Angular để tạo một ứng dụng web đầu tiên Qua nội dung nghiên cứu ở chương 2, ta nhận thấy Angular có một số ưu nhược điểm sau:  Ưu điểm: - Cho phép tạo ra các ứng dụng một cách đơn giản, code sạch - Angular sử dụng data bind giống NET với tính năng liên kết với HTML nên giúp cho người dùng cảm thấy dễ chịu - Angular đang ở trong giai đoạn thử nghiệm - Có thể chạy được trên hầu khắp các trình duyệt trên điện thoại thông minh - Giúp các lập trình viên viết ít code hơn  Nhược điểm: - Do được phát triển từ AngularJS nên nó không an toàn, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống được hoạt động trơn tru - Nếu người dùng vô hiệu hóa JavaScript của trình duyệt thì hệ thống sẽ không thể hoạt động Tiếp theo, chương 3 sẽ là phần ứng dụng của bài khóa luận 32 Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG BÁN ĐIỆN THOẠI DI ĐỘNG 3 1 Khảo sát hệ thống hiện tại 3 1 1 Tổng quan về tổ chức Cửa hàng điện thoại di động Phùng Nguyên được thành lập năm 2012 ở Huyện Núi Thành, tỉnh Quảng Nam 3 1 2 Chức năng và nhiệm vụ của tổ chức Chức năng chính của cửa hàng là mua bán sửa chửa các thiết bị liên quan đến điện thoại di động 3 1 3 Mục tiêu của tổ chức Cửa hàng đang ngày càng phát triển, hướng tới trong tương lai sẽ mở rộng của hàng và đa dạng hơn sản phẩm mà cửa hàng đang có hiện nay 3 1 4 Cơ cấu tổ chức Chủ cửa hàng 3 2 Các yêu cầu của hệ thống 3 2 1 Yêu cầu của khách hàng - Giao diện dễ sử dụng và tính thẩm mỹ cao - Cho phép khách hàng đăng kí thành viên và đảm bảo bí mật an toàn thông tin cá nhân - Xem và thay đổi các thông tin về tài khoản của mình - Thông tin các sản phẩm phải phong phú, chi tiết, đa dạng với nhiều mặt hàng Đặc biệt là những mặt hàng đang được nhiều khách hàng quan tâm nhất - Giới thiệu các sản phẩm mới thường xuyên - Tìm kiếm nhanh chóng, chính xác theo nhiều tiêu chí Quản lý Nhân viên 33 3 2 2 Yêu cầu của quản lý và chủ cửa hàng - Cập nhập thông tin hàng hóa - Quản lý các đơn đặt hàng - Quản lý khách hàng - Thống kê chi tiết, cụ thể, nhanh chóng 3 3 Biểu đồ ca sử dụng (Use case) của hệ thống 3 3 1 Tác nhân của hệ thống Khách hàng: là người truy cập vào trang web đã đăng kí thành viên Người quản lý: điều hành, quản lý và theo dõi mọi hoạt động của hệ thống, tiếp nhận đơn hàng Nhân viên: kiểm tra thông tin và liên hệ khách hàng để chứng thực các đơn hàng Kho: Kiểm tra số lượng sản phẩm trong kho, xuất nhập kho, cập nhập lên server 3 3 2 Ca sử dụng của hệ thống  Đăng nhập hệ thống: mô tả người dùng (quản lý hoặc khách hàng) đăng nhập vào hệ thống bằng tài khoản đã được tạo trước đó để vào hệ thống thực hiện các chức năng  Tìm kiếm sản phẩm: mô tả việc khách hàng vào trang web tìm kiếm các sản phẩm mà mình mong muốn Còn quản lý tìm kiếm sản phẩm để có thể cập nhập sản phẩm  Mua sản phẩm: mô tả việc khách hàng chọn mua sản phẩm từ cửa hàng  Quản lý kho: mô tả việc người quản lý kiểm tra số lượng sản phẩm, xuất nhập kho  Cập nhập sản phẩm (thêm, sửa, xóa sản phẩm): mô tả việc người quản lý kiểm tra và sửa chửa thông tin sản phẩm 34 3 3 3 Biểu đồ ca sử dụng của hệ thống uc Use Case Vi KhachHang NguoiQuanLy DangNhap/DangXuat Mua Hang Tim Kiem San Pham Quan Ly Kho Cap Nhap San Pham Them San Pham Sua San Pham Xoa San Pham Xuat Kho Nhap Kho Dang Ki Thanh Vien «extend» «extend» «extend» «extend» «extend» Hình 3 1: Bi ể u đồ Use Case c ủ a h ệ th ố ng 3 4 Mô hình cấu trúc của hệ thống 3 4 1 Các lớp thực thể Một số lớp lớp thực thể chính của hệ thống: - Lớp Khách hàng (KhachHang) gồm các thuộc tính:  id_NguoiDung: ID người dùng  tenDangNhap: Tên đăng nhập vào hệ thống  matKhau: Mật khẩu truy cập vào hệ thống  hoVaTen: Họ và tên của người đăng nhập vào hệ thống  eMail: email của người dùng 35  soDienThoai: Số điện thoại của người dùng  ngaySinh: Ngày sinh của tài khoản  quyenHan: quyền hạn của người dùng  trangThai: Trạng thái đăng nhập của tài khoản - Lớp Sản phẩm (SanPham) gồm các thuộc tính:  id_SanPham: ID của sản phẩm  maSanPham: Mã của sản phẩm  tenSanPham: Tên của sản phẩm  donGia: Giá bán của sản phẩm  hinhAnh: hình ảnh của sản phẩm  manHinh: màn hình của sản phẩm  heDieuHanh: Hệ điều hành của sản phẩm  cPU: CPU của sản phẩm  camera: camera của sản phẩm  dungLuongPin: Dung lượng pin của sản phẩm  luotXem: Số lượt xem của sản phẩm đó  maHang: Mã hãng của sản phẩm - Lớp Kho (Kho) gồm các thuộc tính:  id_Kho: ID của Kho  maSanPham: mã sản phẩm chứa trong kho  soLuong: Số lượng sản phẩm trong kho  ngayNhap: Ngày nhập sản phẩm vào kho  ngayXuat: Ngày xuất sản phẩm ra khỏi kho  ghiChu: Thông tin thêm về sản phẩm trong kho  maHang: Mã hãng của sản phẩm - Lớp Hãng (Hang) gồm các thuộc tính:  id_Hang: ID của hãng  maHang: Mã hãng của sản phẩm  tenHang: Tên hãng của sản phẩm 36 - Lớp Người quản lý (NguoiQuanLy) gồm các thuộc tính:  id_NguoiQuanLy: ID của người quản lý  tenTaiKhoan: Tên đăng nhập của người quản lý vào hệ thống  matKhau: Mật khẩu của người quản lý đăng nhập vào hệ thống  tenNguoiQuanLy: Họ và tên của người quản lý  eMail: Email liên hệ của người quản lý - Lớp Giỏ hàng (GioHang) gồm các thuộc tính:  id_GioHang: ID của giỏ hàng  tenDangNhap: Tên đăng nhập của khách hàng  maSanPham: mã San 3 4 2 Biểu đồ lớp thực thể của hệ thống class Domain Mo Hang - id_Hang: int - maHang: char - tenHang: char Kho - ghiChu: char - id_Kho: int - maHang: char - maSanPham: char - ngayNhap: date - ngayXuat: date - soLuong: int NguoiDung - eMail: char - hoVaTen: char - id_NguoiDung: int - matKhau: char - ngaySinh: date - quyenHan: char - soDienThoai: char - tenDangNhap: char - trangThai: bit SanPham - camera: char - cPU: char - donGia: decimal - dungLuongPin: char - heDieuHanh: char - hinhAnh: char - id_SanPham: int - luotXem: int - maHang: char - manHinh: char - maSanPham: char - tenSanPham: char NguoiQuanLy - eMail: char - id_NguoiQuanLy: int - matKhau: char - soDienThoai: char - tenNguoiQuanLy: char - tenTaiKhoan: char GioHang - id_GioHang: int - maSanPham: char - soLuong: int - tenDangNhap: char * * 1 * 1 1 * 1 0 * 0 * 1 Hình 3 2: Bi ể u đồ l ớ p th ự c th ể c ủ a h ệ th ố ng 37 3 4 3 Các lớp biên của hệ thống Lớp biên là các lớp nhằm chuyển đổi thông tin giao tiếp giữa các tác nhân và hệ thống Đó chính là các giao diện để tác nhân giao tiếp với hệ thống, cho phép thu thập thông tin hay xuất các kết quả Mỗi cặp tác nhân-ca sử dụng có ít nhất 01 lớp biên Dựa vào các ca sử dụng đã được xây dựng ở trên, hệ thống có các lớp biên như sau:  Đố i v ớ i các s ử d ụ ng Đă ng nh ậ p: - Lớp I_KH_DN: giao diện cho phép người dùng nhập vào các thông tin đăng nhập hệ thống - Lớp I_QL_DN: giao diện dùng để người quản lý đăng nhập vào hệ thống quản trị  Đố i v ớ i ca s ử d ụ ng Đă ng ký s ử d ụ ng: - Lớp I_ KH_DK: giao diện cho việc đăng ký một tài khoản mới  Đố i v ớ i ca s ử d ụ ng mua hàng - Lớp I_KH_MH: giao diện cho việc mua sản phẩm của khách hàng - Lớp I_KH_TT: giao diện cho việc khách hàng thanh toán sản phẩm  Đố i v ớ i ca s ử d ụ ng Tìm ki ế m s ả n ph ẩ m - Lớp I_KH_TK: giao diện cho việc khách hàng tìm kiếm sản phẩm mà mình mong muốn  Đố i v ớ i ca s ử d ụ ng Qu ả n lý kho - Lớp I_QL_XK: Giao diện dùng để người quản lý nhập sản phẩm vào kho - Lớp I_QL_NK: Giao diện dùng để người quản lý xuất sản phẩm từ kho  Đố i v ớ i ca s ử d ụ ng C ậ p nh ậ p s ả n ph ẩ m - Lớp I_QL_CapNhapSP: Giao diện để cho người quản lý Thêm, Sửa, Xóa thông tin của sản phẩm 38 3 4 4 Các lớp điều khiển Lớp điều khiển là các lớp điều hành sự diễn biến trong một ca sử dụng Các lớp điều khiển chứa các quy tắc nghiệp vụ và đứng trung gian giữa lớp biên và lớp thực thể, cho phép từ màn hình có thể truy xuất được các thông tin chứa trong các lớp thực thể Mỗi ca sử dụng có ít nhất một lớp điều khiển Các lớp điều khiển chính của hệ thống: - Lớp C_KH_DN: Lớp điều khiển cho ca sử dụng Đăng nhập của Khách Hàng - Lớp C_QL_DN: Lớp điều khiển cho ca sử dụng Đăng nhập của Người Quản Lý - Lớp C_KH_DK: Lớp điều khiển cho ca sử dụng Đăng kí sử dụng - Lớp C_KH_MH: Lớp điều khiển cho ca sử dụng Mua hàng - Lớp C_KH_TK: Lớp điều khiển cho ca sử dụng Tìm kiếm sản phẩm - Lớp C_QL_QLK: Lớp điều khiển cho ca sử dụng Quản lý kho - Lớp C_QL_CN: Lớp điều khiển cho ca sử dụng Cập nhập sản phẩm 3 5 Mô hình hành vi của hệ thống 3 5 1 Biểu đồ tuần tự Một số biểu đồ tuần tự cho các ca sử dụng chính: 1) Biểu đồ tuần tự cho ca sử dụng Đăng nhập: sd Use Case Mo KhachHang I_KH_DN C_KH_DK NguoiDung thongTinDangNhap(ten, mk) yeuCauKiemTra(ten, mk) kiemTra(ten mk) ketQuaKiemTra() ketQua() thongBaoKetQua() Hình 3 3: Bi ể u đồ tu ầ n t ự cho ca s ử d ụ ng Đă ng nh ậ p 39 2) Biểu đồ tuần tự cho ca sử dụng Mua hàng: sd Use Case Mo KhachHang I_KH_MH C_KH_MH SanPham GioHang muaHang() yeuCauKiemTraThongTinSanPham() KiemTraThongTinSanPham() sai: YeuCauKiemTraLai() đúng: DuaVaoGioHang() Hình 3 4: Bi ể u đồ tu ầ n t ự cho ca s ử d ụ ng Mua hàng 3) Biểu đồ tuần tự cho ca sử dụng Tìm kiếm sản phẩm: sd Use Case Mo KhachHang I_KH_TK C_KH_TK SanPham NhapDieuKienTimKiem() YeuCauTimKiem() XuLyKhoaTimKiem() TaoCauTruyVanSQL() ThucHienTimKiem() HienThiKetQuaTimKiem() Hình 3 5: Bi ể u đồ tu ầ n t ự cho ca s ử d ụ ng Tìm ki ế m s ả n ph ẩ m 40 4) Biểu đồ tuần tự cho ca sử dụng Thêm/Sửa Sản Phẩm (trong ca sử dụng Cập nhập sản phẩm) sd Use Case Mo NguoiQuanLy I_QL_CapNhapSP C_QL_CN SanPham nhapthongtinsanpham() yeuCauKiemTraThongTinSanPham() kiemTraThongTinSanPham() capNhapThongTinSanPham() ketQua() ketQua() thongBaoKetQua() Hình 3 6: Bi ể u đồ tu ầ n t ự cho ca s ử d ụ ng Thêm/S ử a s ả n ph ẩ m 3 5 2 Biểu đồ hoạt động Các biểu đồ hoạt động cho các phương thức chính của các lớp chính: 1) Biểu đồ hoạt động của phương thức dangKyKhachHang(): sd Dynamic View KhoiTaoThemKhachHang Chua co Khach hang Dang doi xu ly Da co Khach Hang Khong the them Khach hang Finish Nhap thong tin Khach hang Kiem tra thong tin vua nhap Thong tin hop le Thong tin khong hop le Hình 3 7: Bi ể u đồ ho ạ t độ ng c ủ a ph ươ ng th ứ c dangKyKhachHang() 41 2) Biểu đồ hoạt động của phương thức suaThongTinKhachHang(): sd Dynamic View Khoi tao Nhap ten Khach hang Dang doi xu ly Khong co ten Khach hang Da co ten Khach hang Doi xu ly Finish Luu tru Kiem tra thong tin vua sua Thong tin sua hop le Sua thong tin Khach hang Ten hop le Ten khong hop le Kiem tra ten Khach hang Hình 3 8: Bi ể u đồ ho ạ t độ ng c ủ a ph ươ ng th ứ c suaThongTinKhachHang() 3) Biểu đồ hoạt động của phương thức muaSanPham(): sd Dynamic View Bat dau Ket thuc Nhap san pham can mua Kiem tra thong tin nguoi mua Dang nhap Kiem tra so luong san pham trong cua hang Dua v ao gio hang Thanh toan Thanh toan hoan tat Da co thong tin Chua co thong tin Con san pham Khach hang chon thanh toan san pham trong gio hang Dang nhap dung Dang nhap sai Het san pham Hình 3 9: Bi ể u đồ ho ạ t độ ng c ủ a ph ươ ng th ứ c muaSanPham() 42 4) Biểu đồ hoạt động của phương thức suaThongTinSanPham(): sd Dynamic View Nhap ten khach hang Finish Doi xu ly Khong co ten San Pham Da co ten San Pham Doi xu ly Luu tru Thong tin sua hop le Kiem tra thong tin vua sua Sua thong tin San Pham Nhap ten Khach hang khac Ten hop le Ten khong hop le Kiem tra ten San Pham Hình 3 10: Bi ể u đồ ho ạ t độ ng c ủ a ph ươ ng th ứ c suaThongTinSanPham() 43 3 6 Cơ sở dữ liệu của hệ thống 3 6 1 Lớp thực thể và các phương thức class Class Mo Hang - id_Hang: int - maHang: char - tenHang: char + suaHang() : void + themHang() : void + xoaHang() : void Kho - ghiChu: char - id_Kho: int - maHang: char - maSanPham: char - ngayNhap: date - ngayXuat: date - soLuong: int + kiemTraSanPhamTonKho() : void + nhapKho() : void + xuatKho() : void NguoiDung - eMail: char - hoVaTen: char - id_NguoiDung: int - matKhau: char - ngaySinh: date - quyenHan: char - soDienThoai: char - tenDangNhap: char - trangThai: bit + dangNhap() : void + dangXuat() : void + lienHeCuaHang() : void + muaSanPham() : void + xemThongTinSanPham() : void SanPham - camera: char - cPU: char - donGia: decimal - dungLuongPin: char - heDieuHanh: char - hinhAnh: char - id_SanPham: int - luotXem: int - maHang: char - manHinh: char - maSanPham: char - tenSanPham: char + suaSanPham() : void + themSanPham() : void + timKiemSanPham() : void + xoaSanPham() : void NguoiQuanLy - eMail: char - id_NguoiQuanLy: int - matKhau: char - soDienThoai: char - tenNguoiQuanLy: char - tenTaiKhoan: char + suaQuanLy() : void + suaThongTinKhachHang() : void + themQuanLy() : void + xoaQuanLy() : void + xoaThongTinKhachHang() : void GioHang - id_GioHang: int - maSanPham: char - soLuong: int - tenDangNhap: char + thanhToan() : void + themSanPhamTrongGioHang() : void + xemGioHang() : void + xoaSanPhamTrongGioHang() : void * * 1 * 1 1 * 1 0 * 0 * 1 Hình 3 11: L ớ p th ự c th ể và các ph ươ ng th ứ c c ủ a h ệ th ố ng 44 3 6 2 Mô hình quan hệ Hình 3 12: Mô hình quan h ệ c ủ a h ệ th ố ng 3 7 Biểu đồ định hướng giao diện người dùng Một số biểu đồ định hướng giao diện người dùng chính của hệ thống: 45 1) Biểu đồ định hướng người dùng cho ca sử dụng Mua Hàng: custom User Interface Mo DangNhap Main XemThongTinSanPham ThanhToan Dua vao gio hang Thanh toan GioHang Thanh toan Thanh toan Dang nhap thanh cong Tìm kiếm và chọn sản phẩm Khach hang muon thanh toan Dua vao gio hang Thanh toan Hình 3 13: Bi ể u đồ đị nh h ướ ng ng ườ i dùng cho ca s ử d ụ ng Mua Hàng 2) Biểu đồ định hướng người dùng cho ca sử dụng Quản lý kho: ui User Interface Mo DangNhap Main QuanLyKho NhapKho XuatKho NhapKho XuatKho Dang nhap thanh cong Nguoi Quan Ly Chon Quan ly Kho Chon Nhap Kho Chon xuat kho Hình 3 14: Bi ể u đồ đị nh h ướ ng ng ườ i dùng cho ca s ử d ụ ng Qu ả n lý kho 46 3) Biểu đồ định hướng người dùng cho ca sử dụng Cập Nhập Sản Phẩm: ui User Interface Mo CapNhapSanPham Main DangNhap Them/Sua Thong bao ket qua Dang nhap thanh cong Chon Them hoac Sua thong tin san pham Nguoi Quan ly chon chuc nang cap nhap san pham Hình 3 15: Bi ể u đồ đị nh h ướ ng ng ườ i dùng cho ca s ử d ụ ng C ậ p Nh ậ p S ả n Ph ẩ m 3 8 Tổng kết chương 3 Trong chương này đã trình bày phân tích và thiết kế hệ thống website bán điện thoại di động, là một trong những giai đoạn quan trọng thực hiện các chức năng của hệ thống Chương tiếp theo sẽ là demo chương trình website 47 Chương 4: ÁP DỤNG CÔNG NGHỆ ANGULAR JS ĐỂ XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI DI ĐỘNG 4 1 Một số chức năng cơ bản Dựa vào ca sử dụng hệ thống, hệ thống có các module chính là: - Module Mua Hang: thực hiện các chức năng thêm vào giỏ hàng và thanh toán sản phẩm - Module Quan Ly Kho: thực hiện các chức năng xuất kho, nhập kho và kiểm tra hàng tồn kho - Module Cap Nhap San Pham: thực hiện các chức năng liên quan đến cập nhập dữ liệu trong cửa hàng 4 2 Giao diện trang web Một số giao diện chính của hệ thống: 1) Giao diện trang chủ: Hình 4 1: Trang ch ủ c ủ a trang web 48 2) Giao diện trang login: Hình 4 2: Trang Đă ng nh ậ p 3) Giao diện trang giỏ hàng: Hình 4 3: Trang gi ỏ hàng 49 4) Giao diện trang thanh toán: Hình 4 4: Trang thanh toán 5) Giao diện trang Cập nhập sản phẩm Hình 4 5: Trang c ậ p nh ậ p s ả n ph ẩ m 50 4 3 Kết luận chương 4: Chương 4 là phần kết quả của cài đặt thử nghiệm trang web bằng AngularJS và NET Framework, ngôn ngữ lập trình là HTML, CSS, JavaScript, C#, quản lý và lưu trữ trên SQL Server 2008 51 Phần 3 KẾT LUẬN 1 Kết quả Với đề tài “Tìm hi ể u AngularJS và áp d ụ ng xây d ự ng website single page application bán đ i ệ n tho ạ i di độ ng” , khóa luận đã tập trung tìm hiểu và nghiên cứu và đã đạt được kết quả như sau: - Nêu lên những đặc điểm cơ bản của AngularJS, các kỹ thuật cơ bản trong cơ bản trong lập trình với AngularJS - Xây dựng một chương trình thực nghiệm bán điện thoại di động viết bằng Angular JS 2 Hướng phát triển Áp dụng AngularJS vào xây dựng các Website về thương mại điện tử, tin tức, giáo dục Trong quá trình hoàn thành khóa luận, mặc dù đã cố gắng và nỗ lực rất nhiều thế nhưng do trình độ bản thân và thời gian nghiên cứu vẫn còn hạn chế nên khóa luận chỉ trình bày các nội dung cơ bản cùng một số thuật toán cơ bản và không thể tránh khỏi các thiếu sót và hạn chế, em rất mong nhận được ý kiến đóng góp, bổ sung của quý thầy cô, bạn bè để cho bài khóa luận này được hoàn thiện hơn 52 Phần 4 TÀI LIỆU THAM KHẢO Tiếng Anh: [1] Ari Lerner (2013), ng-book –The Complete Book on AngularJS Tiếng Việt: [2] Nguyễn Văn Ba (2005), Phát triển hệ thống hướng đối tượng với UML 2 0 và C++, NXB ĐH Quốc gia Hà Nội, Hà Nội [3] Nguyễn Thanh Tuyền (2015), Tài li ệ u AngularJS Ti ế ng Vi ệ t Trang Web: [1] https://docs angularjs org [2] http://gody vn/category/angular-js/ [3] http://freetuts net/ [4] http://www tutorialspoint com/ [5] http://vnfit com/angular-js/ [6] http://www w3schools com 53 Qu ả ng Nam, ngày 23 tháng 4 n ă m 2016 Giảng viên hướng dẫn Sinh viên thực hiện ThS Dương Phương Hùng Nguyễn Văn Hảo XÁC NHẬN CỦA GIẢNG VIÊN CHẤM Giảng viên chấm 1 Giảng viên chấm 2 ThS Hồ Tuấn Anh ThS Nguyễn Thị Minh Châu XÁC NHẬN CỦA KHOA CÔNG NGHỆ THÔNG TIN