Đăng ký Đăng nhập
Trang chủ Thể loại khác Chưa phân loại Nghiên cứu ionic framework xây dựng website bán hàng nội thất...

Tài liệu Nghiên cứu ionic framework xây dựng website bán hàng nội thất

.DOCX
38
71
90

Mô tả:

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT ĐỒ ÁN CHUYÊN NGHÀNH NGHIÊN CỨU IONIC FRAMEWORK XÂY DỰNG WEBSITE BÁN HÀNG NỘI THẤT Giảng viên hướng dẫn : Th.S Trần Bửu Dung Sinh viên thực hiện : Lê Quyết Toàn Mã sinh viên : 161250543133 Khoa : Điện – Điện tử Ngành : Hệ Thống Thông Tin Quản Lý Đà Nẵng, tháng 6/2019 MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG LỜI CẢM ƠN NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN LỜI CAM ĐOAN TỔNG QUAN ĐỀ TÀI.................................................................................................1 1. Lý do chọn đề tài................................................................................................1 2. Công nghệ sử dụng.............................................................................................1 CHƯƠNG I................................................................................................................... 2 CƠ SỞ LÝ THUYẾT....................................................................................................2 1. 2. Giới thiệu về Ionic framwork.............................................................................2 1.1. Giới thiệu......................................................................................................2 1.2. Ưu điểm và nhược điểm...............................................................................2 1.3. Thành phần trong Ionic framwork:...............................................................3 Giới thiệu về Angular.........................................................................................4 2.1. Giới thiệu......................................................................................................4 2.2. Ưu điểm và nhược điểm...............................................................................4 2.3. Thành phần trong Angular............................................................................4 CHƯƠNG II.................................................................................................................7 ĐẶC TẢ CHỨC NĂNG HỆ THỐNG..........................................................................7 1. Các tác nhân hệ thống........................................................................................7 2. Sơ đồ Usecase....................................................................................................7 3. Đặc tả usecase....................................................................................................8 CHƯƠNG III..............................................................................................................10 THIẾT KẾ HỆ THỐNG..............................................................................................10 1. Thiết kế cơ sở dữ liệu.......................................................................................10 2. Sơ đồ ERD.....................................................................................................14 3. Sơ đồ Relationship...........................................................................................15 CHƯƠNG IV..............................................................................................................16 TRIỂN KHAI HỆ THỐNG.........................................................................................16 1. Giao diện trang admin......................................................................................16 1.1 Trang chủ...................................................................................................16 1.2 Đăng nhập..................................................................................................16 1.3 Quản lý các bảng........................................................................................17 a. Tài khoản.......................................................................................................17 b. Khách hàng....................................................................................................17 c. Nhân viên.......................................................................................................18 d. Sản phẩm.......................................................................................................18 e. Loại sản phẩm................................................................................................19 f. Đơn hàng.......................................................................................................19 g. Phiếu nhập.....................................................................................................20 h. Nhà cung cấp.................................................................................................20 2. Giao diện ứng dụng..........................................................................................21 2.1 Màn hình giới thiệu (splash screen)............................................................21 2.2 Trang chủ...................................................................................................21 2.3 Đăng ký......................................................................................................22 2.4 Đăng nhập..................................................................................................22 2.5 Sản phẩm....................................................................................................23 2.6 Giỏ hàng.....................................................................................................23 DANH MỤC HÌNH Hình 2. 1 Mô Hình MVC................................................................................................................................. 6 YHình 3. 1 Sơ đồ ERD.........................................................................................................................................7Y Hình 4. 1 Sơ đồ ERD............................................................................................................................................14 Hình 4. 2 Sơ đồ relationship 1 Hình 5. 1 Trang chủ.............................................................................................................................................16 Hình 5. 2 Đăng nhập............................................................................................................................................16 Hình 5. 3 Users (tài khoản)..................................................................................................................................17 Hình 5. 4 Customer (Khách hàng)......................................................................................................................17 Hình 5. 5 Employees (nhân viên)........................................................................................................................18 Hình 5. 6 Products (sản phẩm)............................................................................................................................18 Hình 5. 7 Categories ( Loại sản phẩm)...............................................................................................................19 Hình 5. 8 Order ( đơn hàng)................................................................................................................................19 Hình 5. 9 Bills (phiếu nhập).................................................................................................................................20 Hình 5. 10 Suppliers (nhà cung cấp)...................................................................................................................20 Hình 5. 11 Màn hình giới thiệu...........................................................................................................................21 Hình 5. 12 trang chủ.............................................................................................................................................21 Hình 5. 13 Đăng ký...............................................................................................................................................22 Hình 5. 14 Đăng nhập..........................................................................................................................................22 Hình 5. 15 Trang sản phẩm.................................................................................................................................23 Hình 5. 16 Giỏ hàng.............................................................................................................................................23 DANH MỤC BẢNG Bảng 4. 1 Bảng User(tài khoản)..........................................................................................................................10 Bảng 4. 2 Bảng Employees ( nhân viên )............................................................................................................10 Bảng 4. 3 Bảng Customers (khách hàng)...........................................................................................................11 Bảng 4. 4 Bảng Administrator............................................................................................................................11 Bảng 4. 5 Bảng Suppliers (nhà cung cấp)..........................................................................................................11 Bảng 4. 6 Bảng Categories ( Loại sản phẩm).....................................................................................................12 Bảng 4. 7 Bảng Products (sản phẩm).................................................................................................................12 Bảng 4. 8 Bảng Order ( đơn hàng)......................................................................................................................12 Bảng 4. 9 Bảng Order_detail ( chi tiết đơn hàng).............................................................................................13 Bảng 4. 10 Bảng Bills ( Phiếu nhập)...................................................................................................................13 Bảng 4. 11 Bảng Bill_detail( chi tiết phiếu nhập)..............................................................................................13 LỜI CẢM ƠN Em xin gửi lời cám ơn chân thành và sâu sắc tới cô Trần Bửu Dung đã hướng dẫn, giúp đỡ em trong suốt thời gian thực hiện đề tài. Em xin chân thành cám ơn thầy cô bộ môn đã tận tình giảng dạy, truyền đạt kiến thức cho em trong các kỳ học vừa qua. Xin chân thành cám ơn tất cả bạn bè đã động viên, giúp đỡ em trong thời gian học tập và hoàn thành đồ án. Mặc dù đã cố gắng nhiều nhưng sẽ không thể tránh khỏi những thiếu sót. Em kính mong nhận được sự góp ý của quý Thầy Cô và các bạn để hoàn thnah tốt hơn. Đà nẵng, tháng 6 năm 2019 Sinh viên thực hiện Lê Quyết Toàn NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Đà Nẵng, tháng 6 ngày 2019 Giáo viên hướng dẫn LỜI CAM ĐOAN Tôi xin cam đoan 1. Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn của cô Trần Bửu Dung. 2. Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố. 3. Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin chịu hoàn toàn trách nhiệm. Sinh viên Lê Quyết Toàn BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung TỔNG QUAN ĐỀ TÀI 1. Lý do chọn đề tài Với sự phát triển của điện thoại và nhu cầu sử dụng ngày càng tăng, để thuận tiện cho việc quảng bá thương hiệu sản phẩm cũng như tiếp cận khách hàng rộng rãi hơn thì cửa hàng cần có app chạy trên nhiều nền tảng như iOS, Android, máy tính…mà Ionic framwork có thể đáp ứng được những yêu cầu đó, chính vì vậy, em đã chọn đề tài “NGHIÊN CỨU IONIC FRAMWORK XÂY DỰNG ỨNG DỤNG BÁN HÀNG NỘI THẤT TRÊN ĐIỆN THOẠI DI ĐỘNG” 2. Công nghệ sử dụng - Xây dựng web service bằng PHP, JavaScript, CSS, HTML - Công nghệ : + Ionic framwork có tích hợp Angular + CSS + HTML + JavaScript + Hệ quản trị sơ sở dữ liệu: MySQL Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 1 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung CHƯƠNG I CƠ SỞ LÝ THUYẾT 1. Giới thiệu về Ionic framwork 1.1.Giới thiệu Ionic là một framework dùng để phát triển một ứng dụng Hybrid cho mobile. Hybrid có thể được hiểu là con lai giữa ứng dụng native và web mobile. Bản chất của hybrid là một giao diện được viết bởi html, css, javascript nhưng nó cho phép gọi các api native của hệ thống nên có thể thao tác với hệ điều hành của mobile như các ứng dụng native khác. Ionic được phát triển dựa trên nền của Apache Cordova(trước kia còn gọi là phonegap) và dùng angular1, angular2 để làm core của hệ thống. Các tính năng của Cordova Command Line Interface (Cordova CLI): đây là một tool dùng để khởi tạo một project , xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là thêm nhiều plugin có ích để giúp việc phát triển dễ dàng hơn. Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi ứng dụng di động cần đến. Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết bị di động như cảm biến, camera, GPS… 1.2. Ưu điểm và nhược điểm - Ưu điểm: +Dễ học, thời gian phát triển nhanh, có thể sử dụng các kỹ năng từ lập trình web +Đa nền tảng +Khả năng truy cập đến các tính năng của thiết bị và hệ điều hành như bluetooth, camera,.. +Dễ dàng thiết kế giao diện cho các thiết bị có kích cỡ khác nhau Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 2 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung +Việc sử dụng AngularJS làm core giúp phần xử lý UI linh động hơn so với javasript hay thư viện Jquery. +Việc sử dụng AngularJS làm core cũng mang lại lợi thế lớn so với các framework cho ứng dụng hybrid khác. +Ionic cung cấp đầy đủ các thành phần trong giao diện người dùng như Pull-toRefresh, Infinite-loader, tabs, … - Nhược điểm: +Vẫn còn trong giai đoạn phát triển +Một số API cũng chưa được hỗ trợ để giao tiếp với các thiết bị +Hiệu năng vẫn chưa cao và ổn định +Cộng đồng phát triển ứng dụng vẫn còn chưa đông 1.3. Thành phần trong Ionic framwork: - Slides Nếu bạn muốn ứng dụng của bạn có một hướng dẫn cho người dùng lần đầu, thì thành phần Slides giúp dễ dàng tạo ra một hướng dẫn như vậy. Thành phần này cho phép bạn tạo ra các layout dựa trên trang mà người dùng có thể vuốt qua để đọc tất cả về ứng dụng của bạn. - Action Sheet Các Action Sheet là các menu trượt lên từ phía dưới màn hình. Một Action Sheet được thể hiện trên lớp trên cùng của màn hình, do đó bạn hoặc là phải bỏ qua nó bằng cách bấm vào khoảng trống hoặc chọn một tùy chọn từ menu. Điều này thường được sử dụng cho các xác nhận chẳng hạn như khi bạn xoá bỏ một tập tin trên thiết bị iOS của bạn. - Segments Segments giống như các tab. Chúng được sử dụng để nhóm các nội dung liên quan lại với nhau theo một cách mà người dùng chỉ có thể nhìn thấy các nội dung của segment (phân đoạn) hiện đang được chọn. Segments thường được sử dụng với danh sách để lọc các phần tử liên quan. - Toast Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 3 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Toast là biến thể nhẹ của cảnh báo. Chúng thường được sử dụng để thông báo cho người dùng một cái gì đó đã xảy ra mà không yêu cầu bất kỳ hành động nào từ người dùng. Chúng thường được hiển thị ở đầu hoặc cuối trang để không làm ảnh hưởng đến nội dung đang được hiển thị. Chúng cũng biến mất sau một số giây cụ thể. 2. Giới thiệu về Angular 2.1.Giới thiệu - Angular là một nền tảng và khung để xây dựng các ứng dụng khách trong HTML và TypeScript. Angular được viết bằng TypeScript. Nó thực hiện chức năng cốt lõi và tùy chọn như một tập hợp các thư viện TypeScript mà bạn nhập vào ứng dụng của mình. - Các khối xây dựng cơ bản của ứng dụng Angular là NgModules , cung cấp bối cảnh biên dịch cho các thành phần . NgModules thu thập mã liên quan vào các bộ chức năng; một ứng dụng Angular được xác định bởi một bộ NgModules. Một ứng dụng luôn có ít nhất một mô-đun gốc cho phép bootstrapping và thường có nhiều mô-đun tính năng hơn 2.2. Ưu điểm và nhược điểm - Ưu điểm:  Cung cấp khả năng tạo ra các Single Page Aplication dễ dàng.  Cung cấp khả năng kiên kết dữ liệu tới HTML, khiến cho người dùng cảm giác linh hoạt, thân thiện.  Dễ dàng viết Unit test.  Dễ dàng tái sử dụng component.  Giúp lập trình viên viết code ít hơn với nhiều chức năng hơn.  Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile. - Nhược điểm:  Không an toàn : được phát triển từ javascript cho nên ứng dụng được viết bởi AngularJS không an toàn. Nên có sự 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. Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 4 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung  Phu thuộc : Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ nhìn thấy trang cơ bản. 2.3. Thành phần trong Angular - Ng-app: Các ng-app chỉ thị AngularJS rằng đây là phần tử gốc của ứng dụng AngularJS. Tất cả các ứng dụng AngularJS phải có phần tử gốc. Bạn chỉ có thể có một ng-app chỉ thị trong tài liệu HTML của mình. Nếu có nhiều hơn một ng-app chỉ thị xuất hiện, liên kết đầu tiên sẽ được sử dụng. - Ng-model: Chỉ thị ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn, văn bản) với dữ liệu ứng dụng. Với ng-model, bạn có thể liên kết giá trị của trường đầu vào với biến được tạo trong AngularJS. - Ng-bind: Các ng-bind AngularJS để thay thế nội dung của một phần tử HTML với giá trị của một biến, hoặc biểu hiện nhất định. Nếu giá trị của biến hoặc biểu thức thay đổi thì nội dung của phần tử HTML được chỉ định cũng sẽ được thay đổi. 3. Giới thiệu mô hình MVC 3.1. MVC là gì? MVC là viết tắt của 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ói cho dễ hiểu, nó là mô hình phân bố source code thành 3 phần, mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác. 3.2. Các thành phần trong mô hình MVC - Controller Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng… Chẳng hạn thành phần này sẽ nhận request từ url và form để thao tác trực tiếp với Model. - Model Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý… - View Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 5 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung đối tượng GUI như textbox, images… Hiểu một cách đơn giản, nó là tập hợp các form hoặc các file HTML. 3.3. Luồng đi trong MVC Hình 2. 1 Mô Hình MVC Khi có một yêu cầu từ phía client gửi đến server, Bộ phận controller có nhiệm vụ nhận yêu cầu, xử lý yêu cầu đó. Và nếu cần, nó sẽ gọi đến phần model, vốn là bộ phần làm việc với Database.. Sau khi xử lý xong, toàn bộ kết quả được đẩy về phần View. Tại View, sẽ gen ra mã Html tạo nên giao diện, và trả toàn bộ html về trình duyệt để hiển thị. 3.4. Ưu điểm và nhược điểm Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 6 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung - Ưu điểm: 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 thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp, bảo trì.. - Nhược điểm: Đối với dự án nhỏ việc áp dụng mô hình MC gây cồng kềnh, tốn thời gian trong quá trình phát triển. Tốn thời gian trung chuyển dữ liệu của các thành phần. 3.5. Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 7 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung CHƯƠNG II ĐẶC TẢ CHỨC NĂNG HỆ THỐNG 1. Các tác nhân hệ thống - Người dùng chung + Đăng ký + Tìm kiếm sản phẩm + Xem sản phẩm + Đặt hàng + Hủy đơn hàng - Người dùng thành viên + Đăng nhập + Cập nhật thông tin cá nhân + Xem tình trạng đơn hàng - Quản trị viên + Đăng nhập + Cập nhật sản phẩm + Cập nhật danh mục sản phẩm + Xử lý đơn hàng + Phân quyền - Nhân viên bán hàng + Đăng nhập + Xem thông tin đơn hàng + Tìm kiếm + Xử lý đơn hàng - Nhân viên kho + Cập nhật phiếu nhập + Tìm kiếm đơn hàng Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 8 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung + Số lượng sản phẩm tồn Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 9 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 10 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung 1. Sơ đồ Usecase Hình 3. 1 Sơ đồ ERD Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 7 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung 2. Đặc tả usecase - Usecase đăng ký thành viên - Tóm tắt: Khách hàng viếng thăm sử dụng usecase “Đăng ký” để tạo tài khoản cho mình trên website. - Actor: Khách hàng viếng thăm - Các bước thực hiện:  B1. Trên giao diện đăng nhập, hhách hàng viếng thăm chọn Đăng ký.  B2. Hệ thống sẽ hiển thị giao diện đăng ký và khách hàng viếng thăm nhập thông tin vào giao diện rồi bấm đăng ký để lưu vào cơ sở dữ liệu.  B3. Kết thúc Usecase . - Usecase quản lý đăng nhập - Đối tượng sử dụng (actor) bao gồm: khách hàng thành viên, nhân viên, admin - Use case này mô tả các bước đăng nhập của các actor vào hệ thống. - Các bước thực hiện:  B1. Hệ thống yêu cầu actor cung cấp thông tin đăng nhập gồm tên đăng nhập và mật khẩu.  B2. Actor nhập xong thông tin đăng nhập và click nút đăng nhập.  B3. Hệ thống check lại thông tin đăng nhập và thông báo thành công/thất bại cho actor. Nếu đăng nhập thành công hệ thống dựa trên thông tin đăng nhập sẽ đồng thời phân quyền tùy theo loại vai trò. Nếu đăng nhập thất bại, hệ thống sẽ hiện thông báo cho người dùng và yêu cầu đăng nhập lại. - Đặt hàng - Tóm tắt: Khách hàng thành viên sử dụng usecase “Đặt mua” để tham gia mua hàng trực tuyến. - Actor: Khách hàng thành viên - Các dòng sự kiện chính  B1. Trên giao diện sản phẩm , Khách hàng thành viên chọn Đặt mua . Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 8 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung  B2. Hệ thống sẽ hiển thị giao diện chứa thông tin khách hàng và danh sách các sản phẩm khách hàng đặt mua. Sau khi nhập đầy đủ thông tin thì khách hàng xác nhận đặt mua.  B3. Kết thúc Usecase .  Các dòng sự kiện khác: Nếu Khách hàng thành viên không muốn đặt mua thì chọn thoát - Các yêu cầu đặc biệt: Để thực hiện được usecase này yêu cầu khách hàng thành viên phải thực hiện đăng nhập vào hệ thống - Trạng thái hệ thống khi bắt đầu thực hiện Usecase: Trong giỏ hàng của khách hàng phải có tối thiểu 1 sản phẩm - Usecase Tìm kiếm sản phẩm - Actor: Khách hàng, nhân viên, admin  Tại trang sản phẩm, nhập từ khóa cần tìm tại seach, hệ thống sẽ hiển thị tất cả sản phẩm trùng với từ khóa cần tìm. - Usecase Xem đơn hàng - Actor: nhân viên  Tại trang quản lý đơn hàng, bấm chọn đơn hàng cần xem hoặc nhập từ khóa cần tìm của đơn hàng, rồi chọn đơn hàng cần xem Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 9
- Xem thêm -

Tài liệu liên quan