NGHIÊN CỨU ANGULARJS, ANGULAR MATERIAL VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEBSITE BẢO HÀNH THIẾT BỊ TIN HỌC - Full 10 điểm

1 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN -----  ----- NGUYỄN ĐỨC NHÂN 8 NGHIÊN CỨU ANGULARJS, ANGULAR MATERIAL VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEBSITE BẢO HÀNH THIẾT BỊ TIN HỌC KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Qu ả ng Nam, tháng 04 n ă m 2017 2 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGỆ THÔNG TIN -----  ----- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: NGHIÊN CỨU ANGULARJS, ANGULAR MATERIAL VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEBSITE BẢO HÀNH THIẾT BỊ TIN HỌC Sinh viên thực hiện HỌ TÊN: NGUYỄN ĐỨC NHÂN MSSV: 2113021018 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA: 2013 – 2017 Cán bộ hướng dẫn ThS TRẦN THỊ DIỆU HIỀN Qu ả ng Nam, tháng 4 n ă m 2017 3 MỤC LỤC Phần 1 MỞ ĐẦU 1 1 1 Lý do chọn đề tài 1 1 2 Mục tiêu của đề tài 1 1 3 Đối tượng và phạm vi nghiên cứu 1 1 4 Phương pháp nghiên cứu 1 1 5 Lịch sử nghiên cứu 2 1 6 Đóng góp của đề tài 2 1 7 Cấu trúc đề tài 2 Phần 2 NỘI DUNG NGHIÊN CỨU 3 Chương 1: TỔNG QUAN VỀ ANGULARJS, ANGULAR MATERIAL 3 1 1 AngularJS 3 1 1 1 Giới thiệu về AngularJS 3 1 1 2 Tính năng và các thành phần trong AngularJS 4 1 1 3 Ưu nhược điểm của AngularJS 6 1 2 Angular Material 6 1 2 1 Giới thiệu về Angular Material 6 1 2 2 Ưu nhược điểm của Angular Material 9 1 3 Các thành phần liên quan 9 1 3 1 Web service 9 1 3 2 TelerikFidder 11 1 3 3 Ajax, Json 17 Chương 2: XÂY DỰNG WEBSITE QUẢN LÝ BẢO HÀNH THIẾT BỊ TIN HỌC21 2 1 Giới thiệu bài toán 21 2 2 Phân tích và xây dựng ứng dụng 21 2 2 1 Mô tả bài toán 21 2 2 2 Đặc tả yêu cầu 21 2 2 3 Xác định tác nhân của hệ thống 22 2 2 4 Các chức năng chính của hệ thống 23 3 2 5 Xác định các UC 24 2 2 6 Đặc tả UC 24 2 2 7 Biểu đồ UC 29 2 2 8 Biểu đồ tuần tự 32 2 2 9 Biểu đồ lớp 36 2 2 10 Biểu đồ trạng thái 37 Chương 3 : Chương trình thử nghiệm 39 3 1 Cài đặt hệ thống: 39 3 2 Các module được cài đặt trong hệ thống 39 3 3 Một số giao diện của chương trình 39 Phần 3 KẾT LUẬN 43 1 Kết luận 43 1 1 Kết quả : 43 1 2 Hạn chế : 43 2 Hướng phát triển của đề tài 43 PHẦN 4 TÀI LIỆU THAM KHẢO 44 NHẬN XÉT CỦA GIẢNG VIÊN 45 4 5 DANH MỤC HÌNH ẢNH Hình 1 1 Các thành phần của angularjs 4 Hình 1 2 Responsive angular material 7 Hình 1 3 Mô tả angular material 8 Hình 1 4 Không gian 3 chiều angular material 8 Hình 1 5 Giao diện fiddler 12 Hình 1 6 Get dữ liệu trong Fiddler 12 Hình 1 7 Giao diện khi nhập vào Execute 13 Hình 1 8 Hiển thị kết quả dạng json 13 Hình 1 9 Giao diện khi post dữ liệu 14 Hình 1 10 Giao diện FUT với Fiddler 15 Hình 1 11 Khi dữ liệu cập nhập lên server 15 Hình 1 12 Delete dữ liệu với Fiddler 16 Hình 1 13 Thử lại dữ liệu sau khi xóa 17 Hình 2 1 Biểu đồ UC tổng quát 29 Hình 2 2 Biểu đồ UC nhân viên 29 Hình 2 3 Biểu đồ UC quản lý sản phẩm 30 Hình 2 4 Biểu đồ UC nhà cung cấp 30 Hình 2 5 Biểu đồ UC nhà sản xuất 30 Hình 2 6 Biểu đồ UC quản lý khách hàng 31 Hình 2 7 Biểu đồ UC tiếp nhận sản phẩm 31 Hình 2 8 Biểu đồ UC bàn giao sản phẩm 31 Hình 2 9 Biểu đồ UC công việc 32 Hình 2 10 Biểu đồ tuần tự lập phiếu 32 Hình 2 11 Biểu đồ tuần tự quản lý sản phẩm 33 Hình 2 12 Biểu đồ tuần tự quản lý khách hàng 33 Hình 2 13 Biểu đồ tuần tự quản lý nhà cung cấp 34 Hình 2 14 Biểu đồ tuần tự quản lý nhà sản xuất 34 Hình 2 15 Biểu đồ tuần tự quản lý nhân viên 35 Hình 2 16 Biểu đồ tuần tự quản lý lỗi 35 Hình 3 17 Biểu đồ tuần tự quản lý công việc 36 Hình 2 18 Biểu đồ lớp 36 Hình 2 19 Biểu đồ trạng thái nhân viên 37 Hình 2 20 Biểu đồtrạng thái tài khoản 37 Hình 2 21 Biểu đồ trạng thái thanh toán 37 Hình 2 22 Biểu đồ trạng thái sản phẩm 38 Hình 2 23 Giao diện main di động 39 Hình 2 24 Giao diện chính máy tính 40 Hình 2 25 Giao diện quản lý phiếu 40 Hình 2 26 Giao diện trang sản phẩm 41 Hình 2 27 Giao diện trang thêm sản phẩm 41 6 DANH MỤC BẢNG Bảng 1 : Chức năng tiếp nhận sản phẩm 23 Bảng 2 : Chức năng bảo hành thiết bị 23 Bảng 3 : Chức năng bàn giao sản phẩm 23 Bảng 4 : Chức năng thống kê 23 Bảng 5 : Các UC hệ thống 24 7 CÁC TỪ VIẾT TẮT Từ viết tắt Từ viết đầy đủ CNTT Công nghệ thông tin CSDL Cơ sở dữ liệu HTML HyperText Markup Language PHP Hypertext Preprocessor HTTP HyperText Transfer Protocol DOM Document Object Model XML eXtensible Markup Language WWW World Wide Web UC User Case MVC Model – View – Controller 8 LỜI CẢM ƠN Em xin chân thành c ả m ơ n quí th ầ y cô đ ã giúp đỡ em th ự c hi ệ n đề tài này Đặ c bi ệ t cô Trần Thị Diệu Hiền đ ã t ậ n tình h ướ ng d ẫ n, giúp đỡ , ch ỉ b ả o em trong su ố t th ờ i gian th ự c hi ệ n khóa lu ậ n t ố t nghi ệ p Đồ ng th ờ i em c ũ ng xin trân tr ọ ng c ả m ơ n nh ữ ng tình c ả m quí báu mà các th ầ y cô trong tr ườ ng Đạ i H ọ c Qu ả ng Nam đ ã truy ề n đạ t cho em, nh ữ ng kinh nghi ệ m, k ỹ thu ậ t và cách th ứ c trong vi ệ c xây d ự ng đề tài này Và cu ố i cùng tôi c ũ ng xin đượ c g ử i l ờ i c ả m ơ n đế n gia đ ình đ ã luôn luôn độ ng viên, ủ ng h ộ , nh ữ ng ng ườ i b ạ n đ ã g ắ n bó, chia s ẻ r ấ t nhi ề u kinh nghi ệ m và nh ữ ng ki ế n th ứ c và nh ấ t là trong th ờ i gian th ự c hi ệ n đề tài, để đề tài có th ể hoàn thành m ộ t cách thành công nh ấ t Tuy nhiên, do th ờ i gian có h ạ n nên em không th ể phát huy h ế t nh ữ ng ý t ưở ng, kh ả n ă ng h ổ tr ợ c ủ a ngôn ng ữ và k ỹ thu ậ t l ậ p trình vào đề tài Trong quá trình xây d ự ng ph ầ n m ề m, không th ể tránh kh ỏ i nh ữ ng sai xót, mong nh ậ n đượ c s ự đ óng góp và c ả m thông c ủ a quí th ầ y cô và các b ạ n Em xin chân thành c ả m ơ n 1 Phần 1 MỞ ĐẦU 1 1 Lý do chọn đề tài Trong thời đại công nghệ thông tin phát triển nhanh chóng, thâm nhập sâu vào tất cả các ngành nghề công việc trong xã hội, thì việc tin học hóa các công việc, nghiệp vụ là điều tất yếu Kể cả trong lĩnh vực bảo hành sản phẩm, thiết bị cũng cần sự trợ giúp của công nghệ thông tin Việc xây dựng các phần mềm bảo hành lại đặt ra một vấn đề lớn là môi trường xây dựng ứng dụng là Window hay là trên nền Web Môi trường Window thì chạy ứng dụng trên máy tính cá nhân, mỗi máy sẽ được cài riêng một phần mềm Người dùng chỉ làm việc với máy cài phần mềm Còn môi trường web thì ứng dụng được cài trên máy chủ Web, người dùng có thể truy cập ứng dụng thông qua trình duyệt web ở bất cứ đâu và bất cứ máy tính nào có kết nối internet Do tính thuận tiện và dể dàng cho người dùng nên em quyết định lựa chọn môi trường Web là môi trường phát triển phần mềm của mình Trong những năm trở lại đây với sự ra đời của nhiều Framework giúp chúng ta xây dựng các phần mềm chạy trên web chuyên nghiệp hơn, trong đó phải kể đến AngularJS là thư viện javaScript mạnh mẽ, nó được sử dụng trong các dự án ứng dụng trang đơn (SPA) AngularJS kế thừa HTML DOM với các thuộc tính bổ sung và làm cho các thao tác người dùng trở nên linh hoạt hơn Với sự phát triển của công nghệ web kéo theo đó là sự phát triển của nhiều css framework, nổi bật là Angular Material, hướng đến những đường nét đơn giản, sử dụng nhiều mảng màu nổi bật, mang lại trải nghiệm mới mẻ hơn, thú vị hơn giống với đời thực hơn Với lý do đó em đã chọn đề tài “Nghiên cứu AngularJS, Angular Material và ứng dụng để xây dựng website quản lý bảo hành thiết bị tin học” làm đề tài khóa luận của mình 1 2 Mục tiêu của đề tài - Đề cập, phân tích và tìm hiểu AngularJS và Angular Material - Giúp cho bản thân có thể hiểu rõ hơn, sâu hơn về các ngôn ngữ trên viết ứng dụng trên web của phần mềm bảo hành thiết bị tin học, để nâng cao trình độ lập trình, từ đó nâng cao khả năng tự học của mình 1 3 Đối tượng và phạm vi nghiên cứu - Nghiên cứu về AngularJS và Angular Material - Nghiên cứu cách tạo nên 1 ứng dụng web bằng AngularJS và Angular material 1 4 Phương pháp nghiên cứu - Tìm kiếm tài liệu liên quan đến AngularJS và Iconic Framwork ở trường, thư viện, Internet, … 2 - Đọc và nghiên cứu tài liệu, chọn những công cụ cần thiết cho việc xây dựng phần mềm - Khảo sát, phỏng vấn để tìm tư liệu liên quan đến chương trình - Phân tích và thiết kế hệ thống 1 5 Lịch sử nghiên cứu - Nội dung đã được nhiều lập trình viên nghiên cứu, tuy nhiên để nâng cao kiến thức của bản thân đồng thời biết thêm những công cụ xây dựng ứng dụng Web tôi lựa chọn đề tài và đi sâu tìm hiểu về AngularJS và Angular Masterial để tạo ra một ứng dụng web 1 6 Đóng góp của đề tài - Xây dựng được một tài liệu tương đối hoàn chỉnh về Angual JS, Angular Material, Http Method và các vấn đề liên quan để mọi người có thể tham khảo và học tập - Xây dựng ứng dụng bảo hành thiết bị tin học trên web có ứng dụng thực tiễn 1 7 Cấu trúc đề tài Đề tài này sẽ phân làm 3 chương: Chương 1: Trình bày về AngularJS, Angular material và các thành phần liên quan Chương 2: Bài toán ứng dụng: vận dụng những ngôn ngữ và phương thức trên viết phần mềm bảo hành thiết bị tin học trên web Chương 3: Chương trình thử nghiệm 3 Phần 2 NỘI DUNG NGHIÊN CỨU Chương 1: TỔNG QUAN VỀ ANGULARJS, ANGULAR MATERIAL 1 1 AngularJS 1 1 1 Giới thiệu về AngularJS A Lịch Sử của AngularJS AngularJS là một dự án mã nguồn mở được phát triển đầu tiên bởi Miško Hevery một nhân viên của Google Hevery bắt đầu nghiên cứu và phát triển dự án vào năm 2009 và phiên bản 1 0 được cho ra mắt vào năm 2012 Do sự hữu ích của dự án này nên Google quyết định là công ty chính thức đứng đằng sau hỗ trợ sự phát triển của AngularJS Phiên bản hiện tại của AngularJS vào thời điểm của bài viết này được công bố trên trang www angularjs org là phiên bản v 4 0 B AngularJS là gì - AngularJS là một Framework phát triển mạnh mẽ dựa trên JavaScript để tạo các ứng dụng RICH Internet Application (RIA) - AngularJS cung cấp cho lập trình viên những tùy chọn để viết các ứng dụng client-side trong mô hình MVC (Model View Controller) một cách rõ ràng - Các ứng dụng được viết bởi AngularJS tương thích với nhiều phiên bản trình duyệt web AngularJS tự động xử lý mã JavaScript để phù hợp với mỗi trình duyệt - AngularJS có mã nguồn mở, miễn phí hoàn toàn, được sử dụng bởi hàng ngàn lập trình viên trên thế giới Nó hoạt động dưới giấy phép Apache License version 2 0 AngularJS không chỉ đơn giản là một thư viện mà nó còn là một framework Khác với các thư viện Javascript như jQuery, AngularJS đưa ra hướng dẫn cụ thể hơn cách cấu trúc mã lệnh HTML và Javascript Ví dụ khi sử dụng AngularJS, mã lệnh HTML thường được viết theo cấu trúc như sau:

C Hoạt động của AngularJS Sau khi AngularJS được nhúng vào trang nó sẽ phân tích mã lệnh HTML Trong mã lệnh HTML này thẻ với thuộc tính ng-app=”” sẽ được sử dụng để bắt đầu khởi tạo một ứng dụng AnglarJS Tiếp theo thẻ với thuộc tính ng-model =”name sẽ tạo ra biến name trong ứng dụng AngularJS trên và giá trị của biến này luôn bằng với giá trị của trường Cuối cùng thẻ

thứ 2 với thuộc tính ng-bind=”name” được dùng mỗi khi ứng dụng phát hiện ra có sự thay đổi trong giá trị của biến name và nó sẽ gắn giá trị này trở thành nội dung HTML đặt bên trong thẻ

thứ 2 này 1 1 2 Tính năng và các thành phần trong AngularJS Dưới đây là các tính năng cốt lõi của AngularJS: Hình 1 1 Các thành phần của angularjs 5 - Data-binding: Nó tự động đồng bộ hóa dữ liệu giữa thành phần model và view - Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nối giữa controller và view - Controller: Đây là những tính năng của AngularJS mà được giới hạn tới một scope cụ thể - Service: AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví dụ $http để tạo XMLHttpRequests Nó là các singleton object mà được khởi tạo duy nhất một lần trong ứng dụng - Filter: Nó lựa chọn (hay là lọc) các tập con từ tập item trong các mảng và trả về các mảng mới - Directive: Directive là các marker trong các phần tử DOM (như các phần tử, thuộc tính, css và nhiều hơn thế) Nó có thể dùng để tạo các thẻ HTML riêng phục vụ những mục đích riêng AngularJS có những directive có sẵn như ngBind,ngModel… - Template: Là các rendered view với các thông tin từ controller và model Nó có thể được sử dụng trong các file riêng rẽ (ví dụ như index jsp) hoặc nhiều view với một trang sử dụng "partials" - Routing: Là khái niệm của sự chuyển dịch qua lại các view - Model View Controller: MVC là một mô hình thiết kế để phân chia các ứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller), một phần sử dụng với một nhiệm vụ nhất định AngularJS không triển khai MVC theo cách truyền thống, mà gắn liền hơn với Model-View-ViewModel Nhóm phát triển AngularJS đã đặt tên vui cho mô hình này là Model View Whatever - Deep Linking: Cho phép bạn mã hóa trạng thái các ứng dụng trên địa chỉ URL để nó có thể được bookmark Các ứng dụng có thể được phục hồi lại từ các địa chỉ URL với cùng một trạng thái - Dependency Injection: AngularJS có sẵn một hệ thống con dependency injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra - Các thành phần của AngularJS AngularJS framework có thể được chia thành ba phần chính sau: + ng-app: directive này định nghĩa và liên kết một ứng dụng AngularJS tới HTML 6 + ng-model: directive này gắn kết giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào HTML + ng-bind: directive này gắn kết dữ liệu ứng dụng AngularJS đến các thẻ HTML 1 1 3 Ưu nhược điểm của AngularJS A Ưu điểm của AngularJS - AngularJS cung cấp khả năng tạo ra các Single Page Application một cách rất rõ ràng và dễ dàng để duy trì - AngularJS cung cấp khả năng Data binding tới HTML do đó giúp người dùng cảm giác linh hoạt, thân thiện - AngularJS code dễ dàng khi unit test - AngularJS sử dụng dependency injection - AngularJS cung cấp khả năng tái sử dụng các component (thành phần) - Với AngularJS, lập trình viên sẽ viết ít code hơn, với nhiều chức năng hơn -Với AngularJS, view là thành phần trong trang HTML thuần, trong khi controller được viết bởi JavaScript với quá trình xử lý nghiệp vụ - Và trên tất cả, ứng dụng AngularJS có thể chạy trên hầu hết các trình duyệt web, trên các nền tảng Android và IOs B Nhược điểm của AngularJS Mặc dù AngularJS có thể kể đến rất nhiều các ưu điểm, nhưng đến thời điểm này, nó vẫn có một số điểm yếu sau: - Không an toàn: Là một JavaScript framework, ứng dụng được viết bởi AngularJS không an toàn Phải có các tính năng bảo mật và xác thực phía server sẽ giúp ứng dụng trở nên an toàn hơn - Nếu người sử dụng ứng dụng của bạn vô hiệu hóa JavaScript thì họ chỉ nhìn được trang cơ bản, không thấy gì thêm 1 2 Angular Material 1 2 1 Giới thiệu về Angular Material Material Design là một phong cách thiết kế mới được Google giới thiệu vào năm 2014 Phong cách thiết kế Material nhắm đến những đường nét đơn giản, sử dụng nhiều mảng màu đậm nổi bật, các đối tượng đồ họa trong giao diện dường như: 7 “trôi nổi” lên Ngoài ra, nó còn bao gồm cả những hiệu ứng chuyển động tự nhiên khi các nút, menu hiện diện trên màn hình Tất cả đều nhằm mang lại cho người dùng trải nghiệm mới mẻ hơn, thú vị hơn và gần giống đời thực hơn Hình 1 2 Responsive angular material A Các đặc điểm của angular material : - Sử dụng các màu nổi bật, thường có một mảng màu chủ đạo nằm ở cạnh trên ứng dụng - Các biểu tượng phẳng, đơn giản nhưng dễ hiểu - Một số ứng dụng sẽ có một nút tròn to nằm ở góc dưới bên phải, thường có chức năng tạo mới - Giao diện phẳng, ít hoặc không có hiệu ứng chuyển màu, có hoặc không có hiệu ứng đổ bóng đen - Menu, nút nhấn, chữ viết… có nhiều khoảng cách trắng nên trông thoáng đãng - Có các hiệu ứng chuyển động tự nhiên, dễ hiểu, có thể gợi ý cho một tính năng nào đó B Nguyên tắc: Material đang dần phổ biến để trở thành một xu hướng, một tiêu chuẩn mới trong thiết kế UI Trong thời gian qua, chúng tôi nhận được khá nhiều lời yêu cầu về việc cung cấp Material resources chất lượng Tuy nhiên, resource sẽ không thể được sử dụng hiệu quả nếu không nắm được những nguyên tắc thiết kế mới Chính vì vậy, để đáp ứng yêu cầu của mọi người, 8 loạt bài viết này sẽ song song cung cấp những nguyên tắc đồng thời tổng hợp những resources tốt nhất hiện tại Anguar material có các yếu tố căn bản : - Không gian: không gian dưới lớp kính màn hình được mô phỏng như một không gian 3 chiều Oxyz với chiều sâu là trục Oz - Ánh sáng: là yếu tố môi trường được sử dụng nhằm thể hiện tính 3 chiều của không gian Hệ quả của ánh sáng, hiệu ứng bóng đổ, sẽ phân định vị trí các lớp Material trong không gian theo trục Oz Có 2 loại nguồn sáng được kết hợp: Nguồn sáng chiếu trực tiếp: nguồn sáng này rất quan trọng Giống như nguồn sáng từ đèn pin, hiệu ứng của nó sẽ là Drop shadow Nguồn sáng này cùng chiều nhưng có hướng nghiêng một chút so với trục Oz Ánh sáng môi trường: ánh sáng của toàn không gian, nguồn sáng không rõ hướng Hệ quả ở đây sẽ là một viền bóng nhẹ xung quanh Material Material Design kết hợp 2 nguồn sáng này để tạo nên một hiệu ứng bóng tổng hợp mô phỏng thế giới trực quan Hình 1 3 Mô tả angular material Material Là những mặt phẳng có độ dày đồng nhất 1dp, Material nằm song song với mặt phẳng Oxy Hình 1 4 Không gian 3 chiều angular material 9 Các mặt phẳng Material sắp xếp chồng lên nhau theo trục Oz Thông qua việc thay đổi kích thước của bóng, bạn sẽ dễ dàng mô tả vị trí tương đối của mỗi lớp so với các lớp khác Trên mỗi Material là nội dung được thiết kế theo nguyên tắc Flat Design Material là một “vật chất vô định hình”, nó có thể thay đổi hình dáng kích thước,có thể tách thành nhiều phần, cũng có thể gộp lại thành một Material có thể xuất hiện và biến mất từ bất kỳ đâu trong không gian Điều này không thuận với cơ chế trong vật lý nhưng tạm thời chúng ta có thể coi tính chất này gần giống với tính chất Material có thể thay đổi kích thước Material có thể di chuyển song song với mặt phẳng Oxy Khi người dùng tương tác với Material, nó sẽ di chuyển dọc theo trục Oz (nâng lên, hạ xuống) 1 2 2 Ưu nhược điểm của Angular Material Google muốn mang lại trải nghiệm thống nhất cho người dùng trong hệ sinh thái của hãng Người dùng cuối như chúng ta sẽ có cảm giác quen thuộc hơn, dành ít thời gian để học hỏi hơn khi sử dụng cùng một app nhưng trên nhiều máy khác nhau Các lập trình viên thì có thể đảm bảo rằng cách người dùng trải nghiệm app của họ là như nhau không quan trọng thiết bị đang chạy là gì Material cũng giống như một hơi thở mới cho nền tảng 7 năm tuổi này và tránh đi sự nhàm chán mà chúng ta đã phải nhìn thấy trong vòng nhiều năm liên tục Nhờ có các màu sắc vui vẻ và sinh động hơn, hiệu ứng chuyển động mượt mà hơn 1 3 Các thành phần liên quan 1 3 1 Web service Web service (Web Service) được coi là một công nghệ mang đến cuộc cách mạng trong cách thức hoạt động của các dịch vụ B2B (Business to Business) và B2C (Business to Customer) Giá trị cơ bản của Web service dựa trên việc cung cấp các phương thức theo chuẩn trong việc truy nhập đối với hệ thống đóng gói và hệ thống kế thừa A Giới thiệu về Web service Theo định nghĩa của W3C (World Wide Web Consortium), Web service là một hệ thống phần mềm được thiết kế để hỗ trợ khả năng tương tác giữa các ứng dụng trên các máy tính khác nhau thông qua mạng Internet, giao diện chung và sự gắn kết của nó được mô tả bằng XML Web service là tài nguyên phần mềm có thể xác định bằng địa chỉ URL, thực hiện các chức năng và đưa ra các thông tin người dùng yêu cầu 10 Một Web service được tạo nên bằng cách lấy các chức năng và đóng gói chúng sao cho các ứng dụng khác dễ dàng nhìn thấy và có thể truy cập đến những dịch vụ mà nó thực hiện, đồng thời có thể yêu cầu thông tin từ Web service khác Nó bao gồm các mô đun độc lập cho hoạt động của khách hàng và doanh nghiệp và bản thân nó được thực thi trên server Trước hết, có thể nói rằng ứng dụng cơ bản của Web service là tích hợp các hệ thống và là một trong những hoạt động chính khi phát triển hệ thống Trong hệ thống này, các ứng dụng cần được tích hợp với cơ sở dữ liệu (CSDL) và các ứng dụng khác, người sử dụng sẽ giao tiếp với CSDL để tiến hành phân tích và lấy dữ liệu Trong thời gian gần đây, việc phát triển mạnh mẽ của thương mại điện tử và B2B cũng đòi hỏi các hệ thống phải có khả năng tích hợp với CSDL của các đối tác B Đặc điểm của Web service - Web service cho phép client và server tương tác được với nhau ngay cả trong những môi trường khác nhau Ví dụ, đặt Web server cho ứng dụng trên một máy chủ chạy hệ điều hành Linux trong khi người dùng sử dụng máy tính chạy hệ điều hành Windows, ứng dụng vẫn có thể chạy và xử lý bình thường mà không cần thêm yêu cầu đặc biệt để tương thích giữa hai hệ điều hành này - Phần lớn kĩ thuật của Web service được xây dựng dựa trên mã nguồn mở và được phát triển từ các chuẩn đã được công nhận - Một Web service bao gồm có nhiều mô-đun và có thể công bố lên mạng Internet - Là sự kết hợp của việc phát triển theo hướng từng thành phần với những lĩnh vực cụ thể và cơ sở hạ tầng Web, đưa ra những lợi ích cho cả doanh nghiệp, khách hàng, những nhà cung cấp khác và cả những cá nhân thông qua mạng Internet - Một ứng dụng khi được triển khai sẽ hoạt động theo mô hình client-server Nó có thể được triển khai bởi một phần mềm ứng dụng phía server ví dụ như PHP, Oracle Application server hay Microsoft Net… - Ngày nay Web service đang rất phát triển, những lĩnh vực trong cuộc sống có thể áp dụng và tích hợp Web service là khá rộng lớn như dịch vụ chọn lọc và phân loại tin tức (hệ thống thư viện có kết nối đến web portal để tìm kiếm các thông tin cần thiết); ứng dụng cho các dịch vụ du lịch (cung cấp giá vé, thông tin về địa điểm…), các đại lý bán hàng qua mạng, thông tin thương mại như giá cả, tỷ giá hối đoái, đấu giá qua mạng…hay dịch vụ giao dịch trực tuyến (cho cả B2B và B2C) như đặt vé máy bay, thông tin thuê xe… 11 - Các ứng dụng có tích hợp Web service đã không còn là xa lạ, đặc biệt trong điều kiện thương mại điện tử đang bùng nổ và phát triển không ngừng cùng với sự lớn mạnh của Internet Bất kì một lĩnh vực nào trong cuộc sống cũng có thể tích hợp với Web service, đây là cách thức kinh doanh và làm việc có hiệu quả bởi thời đại ngày nay là thời đại của truyền thông và trao đổi thông tin qua mạng Do vậy, việc phát triển và tích hợp các ứng dụng với Web service đang được quan tâm phát triển là điều hoàn toàn dễ hiểu C Ưu và nhược điểm - Ưu điểm: Web service cung cấp khả năng hoạt động rộng lớn với các ứng dụng phần mềm khác nhau chạy trên những nền tảng khác nhau Sử dụng các giao thức và chuẩn mở Giao thức và định dạng dữ liệu dựa trên văn bản (text), giúp các lập trình viên dễ dàng hiểu được Nâng cao khả năng tái sử dụng Thúc đẩy đầu tư các hệ thống phần mềm đã tồn tại bằng cách cho phép các tiến trình/chức năng nghiệp vụ đóng gói trong giao diện Web service Tạo mối quan hệ tương tác lẫn nhau và mềm dẻo giữa các thành phần trong hệ thống, dễ dàng cho việc phát triển các ứng dụng phân tán Thúc đẩy hệ thống tích hợp, giảm sự phức tạp của hệ thống, hạ giá thành hoạt động, phát triển hệ thống nhanh và tương tác hiệu quả với hệ thống của các doanh nghiệp khác - Nhược điểm: Những thiệt hại lớn sẽ xảy ra vào khoảng thời gian chết của Web service, giao diện không thay đổi, có thể lỗi nếu một máy khách không được nâng cấp, thiếu các giao thức cho việc vận hành Có quá nhiều chuẩn cho Web service khiến người dùng khó nắm bắt Phải quan tâm nhiều hơn đến vấn đề an toàn và bảo mật 1 3 2 TelerikFidder Đây là một tool của Telerik dùng để ghi lại các dữ liệu vào ra giữa máy tính và internet Bên cạnh việc xem được các dữ liệu,bạn còn có thể thay đổi các thông tin vào ra giữa máy tính một cách rất dễ dàng Fiddler hỗ trợ rất nhiều loại browser khác nhau từ Internet Explorer, Google Chrome cho đến Safari, Firefox, Opera… 12 Để sử dụng đầu tiên bạn download tại đường dẫn sau http://www telerik com/fiddler sau khi cài đặt bạn có thể chạy và bắt các request/response vào ra giữa máy tính Hình 1 5 Giao diện fiddler A GET dữ liệu bằng Fiddler : Với các GET service thì ngoài cách test sử dụng browser như bài trước thì chúng ta cũng có thể sử dụng Fiddler VD nếu muốn test api trả về danh sách khách hàng chúng ta chỉ cần mở solution, chạy ứng dụng lên rồi từ browser navigate đến đường dẫn http://localhost:33753/api/Customers Sau đó ta quay lại Fiddler sẽ thấy 1 request đã được capture Doucle-click request này chúng ta sẽ xem được chi tiết thông tin Request cũng như Response dạng JSON như Hình 1 6 Get dữ liệu trong Fiddler - Bước 1: nhập vào URL http://localhost:33753/api/Customers/ALFKI 13 - Bước 2: Click Execute như hình dưới: Hình 1 7 Giao diện khi nhập vào Execute Chúng ta sẽ thu được kết quả như sau: Hình 1 8 Hiển thị kết quả dạng json B POST dữ liệu bằng Fiddler Đến đây chúng ta đã biết cách test GET service sử dụng browser hoặc Fiddler, tiếp theo chúng ta sẽ test các POST service Để test các service này thì browser 14 không thực hiện được nếu chúng ta không sử dụng Add-on nhưng với Fiddler thì cách thực hiện tương đối đơn giản qua các bước như dưới đây: - Bước 1: Mở tab Composer, mặc định Fiddler chọn HTTP verb là GET ta cần đổi nó sang POST - Bước 2: Nhập URI vào thanh address địa chỉ của api service POST - Bước 3: Chỉ ra content-type là JSON: Content-type: application/json - Bước 4: Nhập object json PUT lên vào Request Body như sau: {“CustomerID”:”TTung”, “CompanyName”:”Tung Nguyen”,”City”:”Ha Noi”} - Bước 5: Click Execute để thực hiện thêm Customer này Muốn test xem dữ liệu đã được POST lên server chưa, ta đổi verb về GET và URL thành http://localhost:33753/api/Customers/TTung để lấy về Customer vừa mới thêm ta sẽ thấy kết quả trả về như hình dưới chứng tỏ là Customer đã được POST lên service Hình 1 9 Giao diện khi post dữ liệu 15 C PUT dữ liệu bằng Fiddler Chúng ta đã thêm xong dữ liệu bằng POST lên Fiddler các bước để cập nhật dữ liệu bằng PUT service cũng được thực hiện tương tự như sau: - Bước 1: Đổi verb từ POST sang PUT - Bước 2: Nhập URI của api service PUT - Bước 3: Nhập object json PUT lên vào Request Body như sau : {“CustomerID”:”TTung”, “CompanyName”:”Tung Nguyen New”,”City”:”Bac Giang”} Hình 1 10 Giao diện FUT với Fiddler - Bước 4: Click Execute để thực hiện sửa Customer và test dữ liệu xem đã cập nhật Hình 1 11 Khi dữ liệu cập nhập lên server 16 D Delete dữ liệu bằng Fiddler Để test các delete service đơn giản chúng ta chỉ cần thực hiện các bước sau: - Bước 1: Nhập URI Delete service - Bước 2: Đổi verb sang DELETE - Bước 3: Nhập content-type: application/json - Bước 4: Execute request Hình 1 12 Delete dữ liệu với Fiddler 17 Đến đây nếu ta GET lại Customer vừa xóa chúng ta sẽ nhận được response 404 NotFound như hình dưới chứng tỏ là Customer đã bị xóa khỏi database Hình 1 13 Thử lại dữ liệu sau khi xóa 1 3 3 Ajax, Json A Ajax AJAX, là viết tắt của A synchronous Ja vaScript and X ML, (tạm dịch là JavaScript và XML không đồng bộ), là một kỹ thuật mới để tạo các ứng dụng web giàu tính tương tác, nhanh hơn và mượt mà hơn với sự giúp đỡ của XML, HTML, CSS và JavaScript AJAX cho phép các trang web được cập nhật một cách không đồng bộ bằng cách trao đổi các lượng dữ liệu nhỏ với Server Tức là AJAX giúp cập nhật các phần nhỏ trong trang mà không cần tải lại toàn bộ trang Nếu đến đây bạn chưa hiểu thì các dòng tiếp theo đây sẽ giúp bạn hiểu cách AJAX làm việc hơn AJAX sử dụng đối tượng XMLHttpRequest để trao đổi dữ liệu không đồng bộ với máy chủ AJAX không phải là một công nghệ Nó là tập hợp của nhiều công nghệ với thế mạnh của riêng mình để tạo thành một sức mạnh mới AJAX bao gồm: - Thể hiện Web theo tiêu chuẩn XHTML và CSS; 18 - Nâng cao tính năng động và tương tác bằng DOM (Document Object Model); - Trao đổi và xử lý dữ liệu bằng XML và XSLT; - Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest; - Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript Cấu trúc và hoạt động : Trong các ứng dụng Web truyền thống, khi người dùng có một cần thay đổi dữ liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và gửi trả lại trang HTML khác thay thế trang cũ Qui trình này được mô tả là nhấp-chờ và tải lại (click-wait-and-refresh): ví dụ người dùng sau khi nhấn một nút “Submit” trên trang Web phải chờ cho đến khi server xử lý xong mới có thể tiếp tục công việc Ngược lại, trong các ứng dụng AJAX, người dùng có thể nhấn chuột, gõ phím liên tục mà không cần chờ đợi Nội dung tương ứng với từng hành động của người dùng sẽ gần như ngay lập tức được hiển thị vào vị trí cần thiết (đáp ứng gần như tức thời) trong khi trang Web không cần phải refresh lại toàn bộ nội dung Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX trình duyệt phía người dùng chỉ cần tải về phần của trang Web mà người dùng muốn thay đổi Điều này giúp cho ứng dụng Web phản hồi nhanh hơn, thông minh hơn Ngoài ra, điểm đặc biệt quan trọng trong công nghệ AJAX nằm ở chữ A (Asynchronous) – không đồng bộ – tức là người dùng cứ gửi yêu cầu của mình tới server và quay lại với công việc của mình mà không cần chờ trả lời Khi nào server xử lý xong yêu cầu của phía người dùng, nó sẽ báo hiệu và người dùng có thể “thu nhận lấy” để thể hiện những thay đổi cần thiết Vậy tất cả cơ chế này hoạt động thực sự thế nào? AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp này Khi đó, các yêu cầu gửi (resquest) và nhận (response) do AJAX Engine thực hiện Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, Web server có thể gửi trả dữ liệu dạng XML và AJAX Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang 19 Mặt khác, sự kết hợp của các công nghệ Web như CSS và XHTML làm cho việc trình bày giao diện trang Web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp Đây là những lợi ích hết sức thiết thực mà AJAX đem lại B Json JSON viết tắt của JavaScript Object Notation nó là một chuẩn để định dạng dữ liệu, về mặt này, có thể so sánh JSON với XML YAML… Nhưng khi JSON đi với JavaScript hoặc ActionScript thì nó có tính ưu việt hơn hẳn Khi sử dụng JSON với JavaScript hay ActionScript, không cần phải có các bước phân tích phức tạp như đối với XML mà có thể truy vấn trực tiếp giá trị theo tên (khóa) được định nghĩa trong JSON JSON cũng như XML, được xây dựng để mô tả dữ liệu, không có khả năng trình bày, không có khả năng tự chạy Ta chỉ có thể sử dụng JSON để trao đổi dữ liệu, chứ ta không thể chạy JSON - Sử dụng JSON JSON được sử dụng trong khi viết JavaScript dựa trên các ứng dụng bao gồm các phần mở rộng trình duyệt và các trang web Định dạng JSON được sử dụng cho việc tuần tự và truyền dữ liệu có cấu trúc qua kết nối mạng JSON chủ yếu được sử dụng để truyền dữ liệu giữa máy chủ và các ứng dụng web Dịch vụ Web và các API sử dụng định dạng JSON để cung cấp dữ liệu công cộng JSON có thể được sử dụng với các ngôn ngữ lập trình hiện đại - Đặc điểm của JSON JSON có đặc điểm là dễ dàng để đọc và viết Là một định dạng có dung lượng nhẹ JSON là ngôn ngữ độc lập - Các kiểu dữ liệu của Json Có 5 kiểu dữ liệu chính: Number: kiểu số bao gồm số nguyên và số thực String: kiểu chuỗi, nội dung bao bởi cặp dấu nháy kép “ , những ký tự đặt biệt được escape bởi dấu \ Theo chuẩn JSON thì không sử dụng dấu nháy đơn như Javascript để bọc chuỗi Boolean: kiểu luận lý bao gồm 2 giá trị là true và false Array: kiểu mảng, gồm các phần tử phân cách nhau bởi dấu phẩy ‘,’ và mảng được bao bởi cặp dấu [ và ] 20 Object: kiểu đối tượng, gồm những cặp giá trị đi cùng nhau, mỗi cặp phân cách bởi dấu phẩy’,’, đối tượng được bao bởi cặp dấu { và }, cặp giá trị bao gồm tên và giá trị được phân cách bởi dấu hai chấm’:’ Null: giá trị null – Kiểu DateTime: Do JSON là một chuẩn chung có nghĩa là không phụ thuộc nền tảng hay công nghệ, vì vậy JSON không định ra một kiểu thời gian cụ thể, do mỗi ngôn ngữ lập trình, mỗi nền tảng triển khai có sự quy định về kiễu dữ liệu ngày tháng khác nhau, đơn cử như Javascript lưu trữ kiểu Date chỉ từ 1-1-1970 trở đi hoặc như PHP thì không có kiểu dữ liệu Date, Date chỉ là một con số chỉ ra số millisecond tính từ 1-1-1970 (với phiên bản 5 1 0 thì từ 13-12-1901), còn NET thì có giới hạn ngày gần như rộng nhất Chính vì không thể quy định được nên cách gửi / nhận kiểu dữ liệu ngày tháng (Date) bằng JSON cũng khác nhau 21 Chương 2: XÂY DỰNG WEBSITE QUẢN LÝ BẢO HÀNH THIẾT BỊ TIN HỌC 2 1 Giới thiệu bài toán Bảo hành là công tác được thực hiện sau quá trình bán sản phẩm cho khách hàng Công việc này cũng là một trong những công việc chăm sóc khách hàng Đối với công ty mua bán thiết bị tin học thì đây là một công đoạn không thể không tính đến nếu muốn công ty hoạt động hiệu quả Hiện nay các thiết bị kỹ thuật số ngày càng được sử dụng rộng rãi Các doanh nghiệp cũng như các cá nhân luôn lựa chọn nhà cung cấp tôt nhất để mua sản phẩm Và yếu tố được mọi người quan tâm đó là việc các thiết bị của họ sẽ được bảo hành ra sao khi gặp vấn dề Để đáp ứng được yêu cầu đó, phần mềm bảo hành thiết bị giúp cho việc quản lý bảo hành được hiệu quả hơn, tiết kiệm thời gian và chi phí, là nguồn tin cậy của khách hàng 2 2 Phân tích và xây dựng ứng dụng 2 2 1 Mô tả bài toán Hệ thống bảo hành thiết bị được thực hiện xuyên suốt từ khâu tiếp nhận thiết bị, tiến hành kiểm tra, thực hiện sửa chữa, trả hàng và thanh toán nếu có Công việc được thực hiện theo quy trình như sau: Khi khách hàng mang thiết bị đến công ty để bảo hành, nhân viên kinh doanh sẽ tiếp nhận và kiểm tra thiết bị Nếu thiết bị được mua trong vòng 1 tháng và bị lỗi do nhà sản xuất thì nhân viên kinh doanh tiến hành đổi mới sản phẩm từ nguồn hàng của kho bán hàng, sau đó in phiếu bảo hành mới cho khách hàng Nếu thiết bị còn thời gian bảo hành, nhân viên kinh doanh sẽ chuyển cho nhân viên kỹ thuật kiểm tra và sửa chữa Nếu sửa chữa được ngay thì gửi lại cho khách hàng Nếu chưa xử lý được thì báo cho nhân viên kinh doanh in phiếu hẹn cho khách hàng Nếu thiết bị lỗi do kỹ thuật hay về phần cứng thì sẽ sửa chữa và nhập kho bảo hành, nếu lỗi do hệ thống hay gặp vấn đề khó khăn không sửa chữa được sẽ gửi đi bảo hành dựa vào hỗ trợ của phần mềm Khi thiết bị được bảo hành gửi về, nhân viên kinh doanh sẽ tiếp nhận và nhập vào kho bảo hành, tiến hành trả hàng cho khách theo thời gian đã hẹn Nếu thiết bị chưa được gửi về kho đúng tiến độ, nhân viên kinh doanh sẽ gọi điện cho khách gia hạn thêm thời gian trả hàng 2 2 2 Đặc tả yêu cầu Phần mềm bảo hành thiết bị tin học đảm bảo các yêu cầu sau: 22 - Quản lý thông tin thiết bị như hãng sản xuất, loại thiết bị, tên thiết bị, ngày bán, thời gian bảo hành… - Quản lý việc đổi trả hàng: hỗ trợ đổi trả hàng thông qua phiếu mua hàng - Theo dõi nhật ký bảo hành và sử dụng dịch vụ - Quản lý thông tin chi tiết khách hàng như mã khách hàng, tên khách hàng, địa chỉ, điện thoại… - Quản lý thông tin chi tiết nhà cung cấp như mã nhà cung cấp, tên nhà cung cấp, điện thoại, địa chỉ… - Quản lý tiếp nhận sản phẩm, đặt lịch hẹn thời gian bảo hành và bàn giao sản phẩm cho khách hàng thông qua phiếu sửa chữa gồm các thông tin như mã phiếu, khách hàng, số serial sản phẩm, tên sản phẩm, loại sửa chữa, báo giá sản phẩm, ngày nhận, ngày hẹn trả - Quản lý danh mục sửa chữa gồm mã công việc, tên công việc, phân loại sản phẩm, đơn giá bảo hành… - In phiếu xuất kho cho việc sửa chữa - Theo dõi các sản phẩm đang bảo hành, thông báo và báo giá cho khách hàng khi có phát sinh trong quá trình sửa chữa - Tiến hành nghiệm thu, đánh giá nhân viên kỹ thuật bảo hành và bàn giao sản phẩm cho phòng bảo hành - In phiếu thanh toán, phiếu xuất kho sau khi sản phẩm bảo hành xong và giao cho khách hàng 2 2 3 Xác định tác nhân của hệ thống - Người quản trị hệ thống: điều hành, quản lý và theo dõi mọi hoạt động của hệ thống như quản lý nhân viên, quản lý sản phẩm, quản lý hoạt động bảo hành của công ty… - Nhân viên kinh doanh: là những người tiếp nhận và kiểm tra sản phẩm để chuyển cho nhân viên kỹ thuật nếu thiết bị cần được bảo hành và bàn giao sản phẩm cho khách hàng đúng thời gian đã hẹn - Nhân viên kỹ thuật: là những người sửa chữa thiết bị và nhập vào kho bảo hành khi sửa chữa xong - Nhân viên kho: là người quản lý kho, tiến hành nhập kho từ nhà cung cấp khi kho hết hàng Cấp sản phẩm cho kỹ thuật viên và nhận linh kiện từ kỹ thuật viên Trả hàng cho nhà cung cấp khi hàng lỗi không sửa chữa được Thống kê số lượng theo tình trạng bảo hành của sản phẩm hàng tháng 23 2 2 4 Các chức năng chính của hệ thống [1] Tiếp nhận sản phẩm Bảng 1 : Chức năng tiếp nhận sản phẩm Qui tắc Chức năng R1 1 Nhân viên kinh doanh tiếp nhận sản phẩm R1 2 Kiểm tra sản phẩm còn thời gian bảo hành hay không hoặc tiếp nhận yêu cầu sửa chữa từ khách hàng R1 3 Lập phiếu tiếp nhận sản phẩm R1 4 Chuyển phiếu tiếp nhận và sản phẩm cho bộ phận kỹ thuật [2] Bảo hành thiết bị Bảng 2 : Chức năng bảo hành thiết bị Qui tắc Chức năng R2 1 Nhân viên nhận sản phẩm và phiếu tiếp nhận sản phẩm R2 2 Tiến hành sửa chữa R2 3 Nếu không sửa được thì sẽ gửi đi bảo hành R2 4 Kiểm tra lại sản phẩm R2 5 Nhập kho bảo hành [3] Bàn giao sản phẩm và thanh toán Bảng 3 : Chức năng bàn giao sản phẩm Qui tắc Chức năng R3 1 Nhân viên kiểm tra sản phẩm và thời gian bàn giao R3 2 Lấy sản phẩm từ kho R3 3 Bàn giao cho khách hàng theo đúng hẹn R3 4 Thanh toán nếu sản phẩm không thuộc bảo hành [4] Thống kê Bảng 4 : Chức năng thống kê Qui tắc Chức năng R4 1 Thống kê số lượng thiết bị được bảo hành theo từng loại thiết bị trong tháng R4 2 Thống kê số lượng thiết bị bảo hành theo từng tình trạng trong tháng 24 3 2 5 Xác định các UC Bảng 5 : Các UC hệ thống Tác nhân Ca sử dụng Người quản trị hệ thống - Đăng nhập, đăng xuất - Toàn quyền quản lý Nhân viên kinh doanh - Đăng nhập, đăng xuất - Quản lý nhà cung cấp -Quản lý nhà sản xuất - Quản lý khách hàng - Quản lý danh mục công việc sửa chữa - Tiếp nhận và lập phiếu tiếp nhận và sửa chữa sản phẩm - Lấy sản phẩm từ kho bảo hành - Bàn giao sản phẩm cho khách - Thanh toán (nếu có) tùy vào từng sản phẩm Nhân viên kỹ thuật - Nhận sản phẩm và sửa chữa - Trả sản phẩm vào kho khi sửa chữa xong Nhân viên kho - Quản lý sản phẩm 2 2 6 Đặc tả UC [1] UC_ Đăng nhập hệ thống Tác nhân: Người quản trị, nhân viên Mô tả: Sau khi người quản trị cung cấp cho mỗi nhân viên một tài khoản, thì nhân viên có thể truy cập vào hệ thống để quản lý thông tin dữ liệu Luồng sự kiện chính: - Người dùng mở phần mềm - Form đăng nhập hiển thị - Bắt buộc nhập tên, mật khẩu vào form đăng nhập để truy cập vào hệ thống - Hệ thống kiểm tra tên, mật khẩu của thành viên Nếu việc đăng nhập thành công thì mở giao diện hệ thống quản lý Nếu người dùng nhập sai tên, mật khẩu thì yêu cầu nhập lại - UC kết thúc R i : R 1 1 , R 1 2 , R 1 3 , R 1 4 , R 3 1 , R 3 2 , R 3 3 , R 3 4 , R 4 1 , R 4 2 [2] UC_Đăng xuất 25 Tác nhân: Người quản trị, nhân viên Mô tả: Sau khi người dùng đã đăng nhập vào hệ thống, sau khi hoàn thành công việc, tiến hành đăng xuất khỏi hệ thống Luồng sự kiện chính: - Người dùng chọn menu đăng xuất - Hiện thông báo bạn có chắc chắn muốn đăng xuất không - Nếu đồng ý thì trở về màn hình đăng nhập Ngược lại, trở về trang quản lý hệ thống R i : R 1 1 , R 1 2 , R 1 3 , R 1 4 , R 3 1 , R 3 2 , R 3 3 , R 3 4 , R 4 1 , R 4 2 [3] UC_Quản lý nhân viên Tác nhân: Người quản trị Mô tả: Người quản trị có quyền quản lý thông tin nhân viên công ty, thêm, cập nhật nếu có thay đổi Luồng sự kiện chính: - Người quản trị đăng nhập vào hệ thống - Nhấn vào menu quản lý nhân viên để xem và cập nhật thông tin - Nếu có nhân viên mới vào công ty, tiến hành thêm mới một nhân viên, bằng cách nhấn vào nút thêm mới Hiển thị form thêm với các thông tin nhân viên - Hoặc có nhân viên nghỉ thì xóa thông tin nhân viên đó Hiện hộp thông báo Nếu đồng ý thì xóa, ngược lại trở về trang quản lý nhân viên R i : R 1 1 , R 1 2 , R 1 3 , R 1 4 , R 3 1 , R 3 2 , R 3 3 , R 3 4 , R 4 1 , R 4 2 [4] UC_Quản lý sản phẩm Tác nhân: Người quản trị, nhân viên kinh doanh Mô tả: Người dùng quản lý thông tin chi tiết của sản phẩm, thêm, cập nhật, xóa,tìm kiếm thông tin sản phẩm Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý sản phẩm để xem và cập nhật thông tin 26 - Các hành động thêm, sửa, xóa được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin R i : R 1 1 , R 1 2 , R 1 3 , R 1 4 , R 2 1 , R 2 2 , R 2 3 , R 2 4 , R 3 1 , R 3 2 , R 3 3 , R 3 4 , R 4 1 , R 4 2 [5] UC_Quản lý nhà cung cấp Tác nhân: Người quản trị, nhân viên kinh doanh Mô tả: Người dùng quản lý thông tin chi tiết của nhà cung cấp, thêm, cập nhật, xóa thông tin nhà cung cấp Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý nhà cung cấp để xem và cập nhật thông tin - Các hành động thêm, sửa, xóa,tìm kiếm được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin nhà cung cấp R i : R 2 1, R 2 2, R 2 3, R 2 4 [6] UC_Quản lý khách hàng Tác nhân: Người quản trị, nhân viên kinh doanh Mô tả: Những người đã mua hàng của công ty và được bảo hành sản phẩm thì được quản lý thông tin chi tiết của khách hàng đó Việc quản lý thông khách khách hàng thông qua các hành động xem, thêm, sửa, xóa,tìm kiếm dữ liệu Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý khách hành để xem và cập nhật thông tin - Các hành động thêm, sửa, xóa,tìm kiếm được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin khách hàng R i : R 1 1 , R 1 2 , R 1 3 , R 3 1 , R 3 3 , R 3 4 [7] UC_Quản lý danh mục công việc Tác nhân: Người quản trị, nhân viên kỹ thuật Mô tả: Những người đã mua hàng của công ty và được bảo hành sản phẩm thì được quản lý thông tin chi tiết của khách hàng đó 27 Việc quản lý thông khách khách hàng thông qua các hành động xem, thêm, sửa, xóa,tìm kiếm dữ liệu Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý khách hành để xem và cập nhật thông tin - Các hành động thêm, sửa, xóa,tìm kiếm được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin khách hàng R i : R 1 1 , R 1 2 , R 1 3 , R 3 1 , R 3 3 , R 3 4 [8] UC_Quản lý tiếp nhận sản phẩm Tác nhân: Người quản trị, nhân viên kỹ thuật Mô tả: Những người đã mua hàng của công ty và được bảo hành sản phẩm thì được quản lý thông tin chi tiết của khách hàng đó Việc quản lý thông khách khách hàng thông qua các hành động xem, thêm, sửa, xóa,tìm kiếm dữ liệu Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý khách hành để xem và cập nhật thông tin - Các hành động thêm, sửa, xóa,tìm kiếm được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin R i : R 1 1 , R 1 2 , R 1 3 [9] UC_Quản lý bàn giao sản phẩm Tác nhân: Người quản trị, nhân viên kỹ thuật Mô tả: Những người đã mua hàng của công ty và được bảo hành sản phẩm thì được quản lý thông tin chi tiết của khách hàng đó Việc quản lý thông khách khách hàng thông qua các hành động xem, thêm, sửa, xóa dữ liệu Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý khách hành để xem và cập nhật thông tin 28 - Các hành động thêm, sửa, xóa được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin khách hàng R i : R 3 1 , R 3 2 , R 3 3 , R 3 4 [10] UC_Quản lý kho bảo hành Tác nhân: Người quản trị, nhân viên kỹ thuật Mô tả: Những người đã mua hàng của công ty và được bảo hành sản phẩm thì được quản lý thông tin chi tiết của khách hàng đó Việc quản lý thông khách khách hàng thông qua các hành động xem, thêm, sửa, xóa dữ liệu Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý khách hàng để xem và cập nhật thông tin - Các hành động thêm, sửa, xóa được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin khách hàng [11] UC_Thống kê Tác nhân: Nhân viên kho Mô tả: Hàng tháng, nhân viên kho thống kê số lượng sản phẩm nhập kho và thống kê chi phí cho việc bảo hành Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu thống kê để thực hiện thống kê theo yêu cầu R i : R 4 1 , R 4 2 [12] UC_Quản lý nhà sản xuất Tác nhân: Người quản trị, nhân viên kinh doanh Mô tả: Người dùng quản lý thông tin chi tiết của nhà sản xuất, thêm, cập nhật, xóa,tìm kiếm thông tin nhà cung cấp Luồng sự kiện chính: - Người dùng đăng nhập vào hệ thống - Nhấn vào menu quản lý nhà sản xuất để xem và cập nhật thông tin 29 - Các hành động thêm, sửa, xóa,tìm kiếm được thực hiện sau khi người dùng nhấn vào các hành động tương ứng và các form thêm, sửa hiện ra Hiển thị thông báo nếu người dùng muốn xóa thông tin nhà cung cấp R i : R 2 1, R 2 2, R 2 3, R 2 4 2 2 7 Biểu đồ UC A Biểu đồ UC hệ thống Hình 2 1 Biểu đồ UC tổng quát B Biểu đồ UC quản lý nhân viên Hình 2 2 Biểu đồ UC nhân viên 30 C Biểu đồ UC quản lý sản phẩm Hình 2 3 Biểu đồ UC quản lý sản phẩm D Biểu đồ UC quản lý nhà cung cấp Hình 2 4 Biểu đồ UC nhà cung cấp E Biểu đồ UC quản lý nhà sản xuất Hình 2 5 Biểu đồ UC nhà sản xuất 31 F Biểu đồ UC quản lý khách hàng Hình 2 6 Biểu đồ UC quản lý khách hàng G Biểu đồ UC quản lý tiếp nhận sản phẩm Hình 2 7 Biểu đồ UC tiếp nhận sản phẩm H Biểu đồ UC bàn giao sản phẩm Hình 2 8 Biểu đồ UC bàn giao sản phẩm 32 I Biểu đồ UC quản lý công việc bảo hành Hình 2 9 Biểu đồ UC công việc 2 2 8 Biểu đồ tuần tự A Biểu đồ tuần tự lập phiếu : Hình 2 10 Biểu đồ tuần tự lập phiếu 33 B Biểu đồ tuần tự quản lý sản phẩm Hình 2 11 Biểu đồ tuần tự quản lý sản phẩm C Biểu đồ tuần tự quản lý khách hàng Hình 2 12 Biểu đồ tuần tự quản lý khách hàng 34 D Biểu đồ tuần tự quản lý nhà cung cấp Hình 2 13 Biểu đồ tuần tự quản lý nhà cung cấp E Biểu đồ tuần tự quản lý nhà sản xuất Hình 2 14 Biểu đồ tuần tự quản lý nhà sản xuất 35 F Biểu đồ tuần tự quản lý nhân viên Hình 2 15 Biểu đồ tuần tự quản lý nhân viên G Biểu đồ tuần tự quản lý lỗi Hình 2 16 Biểu đồ tuần tự quản lý lỗi 36 H Biểu đồ tuần tự quản lý công việc Hình 3 17 Biểu đồ tuần tự quản lý công việc 2 2 9 Biểu đồ lớp Hình 2 18 Biểu đồ lớp 37 2 2 10 Biểu đồ trạng thái A Trạng thái nhân viên Hình 2 19 Biểu đồ trạng thái nhân viên B Trạng thái tài khoản Hình 2 20 Biểu đồtrạng thái tài khoản C Trạng thái thanh toán Hình 2 21 Biểu đồ trạng thái thanh toán 38 D Trạng thái sản phẩm Hình 2 22 Biểu đồ trạng thái sản phẩm 39 Chương 3 : Chương trình thử nghiệm 3 1 Cài đặt hệ thống: - Hệ thống được viết trên Angularjs và Laravel framework - Xây dựng trên môi trường web - Ngông ngữ lập trình javascript, css - Cơ Sở Dữ Liệu sử dụng : Hệ quản trị Mysqlserver 3 2 Các module chức năng cài đặc trong hệ thống - Chức năng Quản lý Khách Hàng - Chức năng Quản lý Sản Phẩm - Chức năng Quản lý Đăng Nhập - Chức năng Quản lý Nhân Viên - Chức năng Quản lý Lập Phiếu - Quản lý Nhà Cung Cấp , Nhà Sản Xuất - Quản lý lỗi , Công Việc Bảo Hành - Ngoài ra phần mềm còn một số chức năng khác như: thêm ,sữa ,xóa, lưu, tìm kiếm, thoát trong các chức năng quản lý 3 3 Một số giao diện chính của chương trình - Giao diện trang chính di động Hình 2 23 Giao diện main di động 40 - Giao diện trang chính máy tính : Hình 2 24 Giao diện chính máy tính - Giao diện trang quản lý phiếu : Hình 2 25 Giao diện quản lý phiếu 41 - Giao diện trang sản phẩm : Hình 2 26 Giao diện trang sản phẩm - Giao diện trang thêm sản phẩm : Hình 2 27 Giao diện trang thêm sản phẩm 42 - Giao diện xác nhận bảo hành : Hình 2 28 Giao diện xác nhận bảo hành 43 Phần 3 KẾT LUẬN 1 Kết luận 1 1 K ế t qu ả : -Tìm hiểu đánh giá đúng thực trạng của hệ thống hoạt động cùng các ưu nhược điểm - Tìm ra được mô hình hoạt động nhằm nâng cấp, thay đổi hoạt động cũ mà vẫn đảm bảo yêu cầu nghiệp vụ đặt ra - Thiết lập các mối quan hệ giữa các công việc và tìm ra các nhân tố chính tác động trực tiếp đến hệ thống - Đưa ra mô hình dữ liệu, phân tích tìm ra khóa chính, khóa phụ phù hợp và đảm bảo mô hình lý thuyết đã nghiên cứu - Thiết lập các chức năng hoạt động cho toàn hệ thống - Xây dựng được một ứng dụng thực hiện đáp ứng các yêu cầu nghiệp vụ đặt ra, thống kê, tìm kiếm nhanh chóng, thuận tiện và chính xác -Xây dựng được phần mềm bảo hành thiết bị tin học trên nền web 1 2 H ạ n ch ế : Mặc dù đã hệ thống đã hoàn thành, nhưng nó vẫn còn nhiều mặt hạn chế và vấn đề tồn tại Trong thời gian tới em sẽ cố gắng khắc phục các hạn chế và bổ sung thêm những chức năng mới cho hệ thống 2 Hướng phát triển của đề tài Với tính cần thiết của đề tài, trong thời gian tới có thể nghiên cứu xây dựng hoàn chỉnh phần mềm bảo hành thiết bị trên nền web 44 PHẦN 4 TÀI LIỆU THAM KHẢO [1] Website:https://anglarjs org ,http://tedu com vn [2] Website:https://material angularjs org/latest/, http://www w3schools com/ [3] Website:https://www stdio vn/articles/read/202, http://rgb vn/ideas/explore [4] Trần Thị Diệu Hiền(2015), Phân tích thi ế t k ế h ướ ng đố i t ượ ng v ớ i UML, Bài giảng(Trường Đại học Quảng Nam) [5]Website https://www w3schools com 45 NHẬN XÉT CỦA GIẢNG VIÊN Giảng viên hướng dẫn Sinh viên thực hiện ThS Trần Thị Diệu Hiền Nguyễn Đức Nhân Giảng viên chấm 1 Giảng viên chấm 2 ThS Trần Thị Diệu Linh ThS Đỗ Quang Khôi