...Lê Đức Phong.pdf

...Lê Đức Phong.pdf tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập lớn về tất cả các lĩnh vực kinh tế,...

TRƯỜNG ĐẠI HỌ

KHOA CÔNG NGH

PHÁT TRIỂN

HÀNG HÓA

ỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ N

KHOA CÔNG NGHỆ THÔNG TIN

N ỨNG DỤNG WEB QUẢN TR HÀNG HÓA DỰA TRÊN CÔNG NGH

MEAN STACK

Hà Nội – 2016

NG HÀ NỘI

N TRỊ

A TRÊN CÔNG NGHỆ

TRƯỜNG ĐẠI HỌ

KHOA CÔNG NGH

SINH VIÊN:

PHÁT TRIỂN

HÀNG HÓA

Chuyên ngành: Công ngh

Mã ngành:

NG

ỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ N

KHOA CÔNG NGHỆ THÔNG TIN

SINH VIÊN: LÊ ĐỨC PHONG

N ỨNG DỤNG WEB QUẢN TR HÀNG HÓA DỰA TRÊN CÔNG NGH

MEAN STACK

Chuyên ngành: Công nghệ thông tin

NGƯỜI HƯỚNG DẪN: THS NGUYỄN VĂ

Hà Nội – 2016

NG HÀ NỘI

N TRỊ

A TRÊN CÔNG NGHỆ

N VĂN HÁCH

LỜI CẢM ƠN

Sau thời gian tìm hiểu đề tài “Phát triển ứng dụng web quản trị hàng hóa

dựa trên công nghệ MEAN Stack”, em đã hoàn thành tiến độ dự kiến Để đạt

được kết quả này, em đã nỗ lực thực hiện và đồng thời cũng nhận được rất nhiều sự giúp đỡ, quan tâm của thầy cô, bạn bè và gia đình

Em xin chân thành cảm ơn giảng viên hướng dẫn: thầy Ths Nguyễn Văn Hách – Trường Đại học Tài Nguyên và Môi Trường Hà Nội đã tận tình giúp đỡ em hoàn thành đồ án tốt nghiệp này Em xin chân thành cảm ơn các thầy cô và ban lãnh đạo trường Đại học Tài Nguyên và Môi Trường Hà Nội đã nhiệt tình giảng dạy và truyền đạt kiến thức quý báu và bổ ích trong suốt quá trình em học tập tại trường

Vì thời gian có hạn nên không thể tránh khỏi thiếu sót, em rất mong được sự đóng góp ý kiến từ thầy cô và các bạn để có thể giúp hoàn thiện đề tài Em xin chân thành cảm ơn!

Sinh viên thực hiện Đồ án

Lê Đức Phong

MỤC LỤC

LỜI CẢM ƠN

MỤC LỤC

DANH MỤC CÁC TỪ VIẾT TẮT

DANH MỤC CÁC HÌNH ẢNH

DANH MỤC CÁC BẢNG

PHẦN MỞ ĐẦU 1

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT VỀ MEAN STACK 5

1.1 Giới thiệu về MEAN Stack 5

1.2 NodeJS 7

1.2.1 Giới thiệu về NodeJS 7

1.2.2 Đặc điểm của NodeJS 8

1.2.3 Application Framework hỗ trợ NodeJS 9

1.3 AngularJS 10

1.3.1 Giới thiệu framework AngularJS 10

1.3.2 Đặc điểm của AngularJS 10

1.3.3 Ưu, nhược điểm của AngularJS 14

1.4 MongoDB 15

1.4.1 Giới thiệu về MongoDB 15

1.4.2 Ưu, nhược điểm của MongoDB 18

1.5 Kết luận chương 1 19

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ BÀI TOÁN QUẢN TRỊ HÀNG HÓA TRONG CHUỖI CỬA HÀNG BÁN LẺ 20

2.1 Khảo sát và đánh giá hiện trạng 20

2.1.1 Môi trường hoạt động của một cửa hàng bán lẻ 20

2.1.2 Các hoạt động và nguyên tắc quản lý 20

2.1.3 Đánh giá hiện trạng 21

2.1.4 Hướng giải quyết 22

2.2 Phân tích và thiết kế hệ thống 22

2.2.1 Biểu đồ phân cấp chức năng 22

2.2.2 Biểu đồ Use Case 23

2.2.3 Biểu đồ hoạt động 25

2.2.4 Thiết kế đối tượng 31

2.3 Kết luận chương 2 40

CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG WEB QUẢN TRỊ HÀNG HÓA DỰA TRÊN CÔNG NGHỆ MEAN STACK 41

3.1 Thực hiện cài đặt MEAN.js 41

3.1.1 So sánh MEAN.io và MEAN.js 41

3.1.2 Các thành phần yêu cầu trước khi cài đặt 41

3.1.3 Các module quan trọng cần cài đặt 42

3.1.4 Cài đặt MEAN.js và khởi tạo MEAN.js project 44

3.1.5 Cấu trúc thư mục của MEAN.js 44

3.2 Mô tả ứng dụng 46

3.2.1 Giao diện trang chủ 47

3.2.2 Quản lý thông báo 48

3.2.3 Quản lý danh mục sản phẩm 50

3.2.4 Quản lý thông tin sản phẩm 50

3.2.5 Thêm mới đơn hàng 51

3.2.6 Danh sách đơn hàng 52

3.2.7 Quản lý số lượng hàng hóa 52

3.2.8 Kiểm hàng 53

3.2.9 Chuyển hàng 53

3.2.10 Thống kê 54

3.3 Đánh giá kết quả thực nghiệm 55

3.4 Kết luận chương 3 56

KẾT LUẬN 57

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

PHỤ LỤC 59

DANH MỤC CÁC TỪ VIẾT TẮT

SQL Structured Query Language Ngôn ngữ truy vấn mang cấu

trúc

HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn

bản

Interface

Giao diện lập trình ứng dụng

JSON JavaScript Object Noattion Định dạng hoán vị dữ liệu

nhanh

URL Uniform Resource Locator Định vị tài nguyên thống nhất

Management System

Hệ thống quản trị cơ sở dữ liệu

quan hệ

REST Representational State Transfer Quy tắc thiết kế ứng dụng web

DANH MỤC CÁC HÌNH ẢNH

Hình 1: Bảng xếp hạng khảo sát lập trình viên tại Stack Overflow 1

Hình 1.1: Biểu tượng 4 thành phần của MEAN Stack 5

Hình 1.2: Mô hình kiến trúc 3 tầng (3-tiers) 6

Hình 1.3: Mô hình MVC [1] 7

Hình 1.4: Các khái niệm chính của AngularJS 11

Hình 1.5: Hình vẽ mô tả cơ chế two-way data binding 13

Hình 1.6: Cấu trúc một document trong MongoDB 17

Hình 1.7: Cơ chế hoạt động của MongoDB 18

Hình 2.1: Biểu đồ phân cấp chức năng hệ thống quản lý sản phẩm 22

Hình 2.2: Sơ đồ use case của nhân viên bán hàng 24

Hình 2.3: Sơ đồ use case của thủ kho 25

Hình 2.4: Biểu đồ hoạt động quy trình nhập sản phẩm mới 26

Hình 2.5: Biểu đồ hoạt động quy trình kiểm hàng 27

Hình 2.6: Biểu đồ hoạt động quy trình chuyển hàng 29

Hình 2.7: Biểu đồ hoạt động quy trình thanh toán 30

Hình 3.1: Giao diện trang chủ 47

Hình 3.2: Giao diện đăng ký người dùng 47

Hình 3.3: Điền đầy đủ thông tin đăng ký người dùng 48

Hình 3.4: Thanh công cụ của nhân viên bán hàng 48

Hình 3.5: Thanh công cụ của thủ kho 48

Hình 3.6: Giao diện tạo thông báo mới 49

Hình 3.7: Giao diện thông báo và cửa sổ popup 49

Hình 3.8: Giao diện danh sách thông báo 49

Hình 3.9: Giao diện thêm danh mục sản phẩm mới 50

Hình 3.10: Giao diện danh sách danh mục sản phẩm 50

Hình 3.11: Giao diện thêm thông tin sản phẩm mới 51

Hình 3.12: Giao diện quản lý danh sách thông tin sản phẩm 51

Hình 3.13: Giao diện tạo đơn hàng 52

Hình 3.14: Giao diện danh sách đơn hàng 52

Hình 3.15: Giao diện quản lý số lượng sản phẩm 53

Hình 3.16: Giao diện tạo phiếu kiểm hàng 53

Hình 3.17: Giao diện tạo phiếu chuyển hàng 54

Hình 3.18: Giao diện quản lý danh sách phiếu chuyển hàng 54

Hình 3.19: Giao diện thống kê sản phẩm 55

Hình 3.20: Dữ liệu thống kê sản phẩm theo danh mục 55

DANH MỤC CÁC BẢNG

Bảng 1.1 Mô tả các khái niệm chính trong AngularJS 11

Bảng 2.1: Đối tượng “User” mô tả thông tin người dùng đăng nhập vào hệ thống 32 Bảng 2.2: Đối tượng “Outlet” mô tả thông tin của các chuỗi cửa hàng 33

Bảng 2.3: Đối tượng “Product Category” mô tả thông tin của danh mục sản phẩm 33 Bảng 2.4: Đối tượng “Customer” mô tả thông tin của khách hàng 34

Bảng 2.5: Đối tượng “Product” mô tả thông tin của sản phẩm 35

Bảng 2.6: Đối tượng “SaleEntry” mô tả thông tin của hóa đơn thanh toán 36

Bảng 2.7: Đối tượng “Stock-count-entry” mô tả thông tin phiếu kiểm hàng 38

Bảng 2.8: Đối tượng “StockEntry” mô tả thông tin phiếu chuyển hàng, nhập hàng giữa các cửa hàng 39

Bảng 3.1: So sánh MEAN.io và MEAN.js 41