(Đồ án tốt nghiệp) xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs

 Sử dụng công nghệ xây dựng thành công website bán các sản phẩm thân thiện với môi trường.. Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ liệu database, cun

CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE BÁN SẢN PHẨM THÂN THIỆN MÔI TRƯỜNG BẰNG NODEJS

GVHD: TS LÊ VĂN VINH SVTH: PHẠM THỊ NGỌC HƯỜNG MSSV: 16110351

SVTH: LÊ THỊ THANH NGÂN MSSV: 16110396

TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH KHÓA 2016-2020

TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

***** *****

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ tên sinh viên 1: PHẠM THỊ NGỌC HƯỜNG MSSV: 16110351

Họ tên sinh viên 2: LÊ THỊ THANH NGÂN MSSV: 16110396Chuyên ngành: SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài: Xây dựng website bán sản phẩm thân thiện môi trường bằng

Nhóm em xin chân thành cảm ơn khoa CÔNG NGHỆ THÔNG TIN, BỘ MÔNCÔNG NGHỆ PHẦN MỀM, TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

đã tạo điều kiện thuận lợi cho chúng em thực hiện đề tài này

Chúng em cũng xin được gửi lời cảm ơn chân thành nhất đến thầy TS LÊ VĂNVINH, người đã tận tình chỉ bảo và hướng dẫn nhóm em thực hiện đề tài

Bên cạnh đó, chúng em xin gửi lời cảm ơn đến các thầy cô giảng viên của trườngĐại Học Sư Phạm Kỹ Thuật Tp.HCM nói chung cũng như các thầy cô giảng viên khoaCông Nghệ Thông Tin nói riêng, những người đã giảng dạy, tạo điều kiện cho em tíchlũy được những kiến thức quý báu trong những năm học qua

Chúng em đã nỗ lực rất nhiều để hoàn thành tốt nhất nhiệm vụ đề tài, nhưng dokhả năng còn hạn chế nên chắc chắn sẽ không tránh khỏi thiếu sót Chúng em mongnhận được sự tận tình chỉ bảo của các thầy cô để ngày càng tiến bộ

TP Hồ Chí Minh, ngày …… tháng …… năm 2020

Nhóm sinh viên thực hiện:

PHẠM THỊ NGỌC HƯỜNG

LÊ THỊ THANH NGÂN

***** *****

ĐỀ CƯƠNG CHI TIẾT KHÓA LUẬN TỐT NGHIỆP

Họ tên sinh viên 1: PHẠM THỊ NGỌC HƯỜNG MSSV: 16110351

Họ tên sinh viên 2: LÊ THỊ THANH NGÂN MSSV: 16110396Chuyên ngành: SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài: Xây dựng website bán sản phẩm thân thiện môi trường bằng

NodeJS

Họ tên GVHD: TS LÊ VĂN VINH

Thởi gian thực hiện: từ 19/02/2020 – 15/07/2020

NHIỆM VỤ CỦA KHÓA LUẬN:

 Tìm hiểu công nghệ NodeJS xây dựng website bán sản phẩm thân thiện môi trường

 Khảo sát hiện trạng, đánh giá các website bán sản phẩm thân thiện với môi trường

 Phân tích nghiệp vụ của một website mua bán sản phẩm

 Mô hình hóa nghiệp vụ, xây dựng cơ sở dữ liệu

 Cài đặt các chức năng, kiểm thử toàn bộ hệ thống

ĐỀ CƯƠNG VIẾT KHÓA LUẬN:

1 PHẦN 1: PHẦN MỞ ĐẦU 1.1 Tính cấp thiết đề tài

1.2 Mục tiêu của đề tài

1.3 Cách tiếp cận và phương pháp nghiên

cứu 1.3.1 Đối tượng nghiên cứu

2.1.1.3 Tìm hiểu Express Framework của nodeJS

2.1.2.2 Chi tiết từng lớp mô hình MVC

2.1.2.3 Ưu - nhược điểm mô hình MVC

2.2 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU2.2.1 Khảo sát hiện trạng

2.2.2 Xác định yêu cầu

2.2.2.1 Yêu cầu chức năng

2.2.2.2 Yêu cầu phi chức năng

2.2.3 Mô hình hóa yêu cầu

2.2.3.1 Lược đồ use case

3.2 Ưu điểm

3.3 Nhược điểm

3.4 Hướng phát triển trong tương lai

4 TÀI LIỆU THAM KHẢO

KẾ HOẠCH THỰC HIỆN:

1 Đã hoàn tất đăng ký vớiGVHD

2 Được thầy hướng dẫn địnhhướng về các chức năng cầnphát triển, các lựa chọn về

1 Đăng ký đề tài mặt công nghệ để hiện thực

1 19/02 - 26/02 2 Khảo sát hiện trạng và xác 3 Đã kháo sát 5 trang web về

định yêu cầu bán sản phẩm thân thiện môi

trường và trang web về môitrường

4 Đã xác định các yêu cầu cơbản của một website bán sảnphẩm

1 Hoàn thành Use case

1 Xây dựng Use case Diagram Diagram ban đầu

2 27/03 – 18/04 2 Xây dựng Sequence 2 Hoàn thành Sequence

Diagram Diagram ban đầu

3 Thiết kế cơ sở dữ liệu 3 Hoàn thành thiết kế cơ sở dữ

liệu ban đầu

3 19/04 – 01/05 1 Chỉnh sửa hoàn thiện Use 1 Đã hoàn thiện Use case

Sequence Diagram 3 Đã hoàn thiện Sequence

4 Chỉnh sửa hoàn thiện Cơ sở Diagram

dữ liệu 4 Đã hoàn thiện cơ sở dữ liệu

1 Đã hoàn thành thiết kế giao

4 02/05 – 15/05 1 Thiết kế giao diện diện

2 Thiết kế lược đồ lớp 2 Đã hoàn thành thiết kế lược

đồ lớp

5 16/05 – 13/06 1 Xây dựng các chức năng 1 Đã hoàn thành các chức

người dùng GUEST năng người dùng GUEST

6 14/06 – 26/06 1 Xây dựng các chức năng 1 Đã hoàn thành các chức

người dùng USER năng người dùng USER

7 14/06 – 26/06 1 Xây dựng các chức năng 1 Đã hoàn thành các chức

người dùng ADMIN năng người dùng ADMIN

1 Hoàn thành các chức năng 1 Đã hoàn thành các chức

trong Use case Diagram

Diagram

9 26/07 – 30/07 1 Viết báo cáo, làm slide 1 Đã hoàn thành báo cáo và

thuyết trình slide thuyết trình

PHẦN 1: PHẦN MỞ ĐẦU 1

1 TÍNH CẤP THIẾT ĐỀ TÀI 1

2 MỤC TIÊU CỦA ĐỀ TÀI 1

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 2

3.1 Đối tượng nghiên cứu 2

3.2 Phạm vi nghiên cứu 2

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3

PHẦN 2: PHẦN NỘI DUNG 4

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 4

1 TÌM HIỂU CÔNG NGHỆ 4

1.1 Tìm hiểu Javascript 4

1.2 Tìm hiểu NodeJS 5

1.3 Tìm hiểu Express Framework của NodeJS 9

1.4 Tìm hiểu MongoDB 10

1.5 Tìm hiểu về Socket.io 13

1.6 Tìm hiểu về PassportJS 14

2 TÌM HIỂU MÔ HÌNH MVC TRONG XÂY DỰNG WEBSITE 16

2.1 Tìm hiểu mô hình MVC 16

2.2 Chi tiết từng lớp mô hình MVC 17

2.3 Ưu - Nhược điểm mô hình MVC 18

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 19

1 KHẢO SÁT HIỆN TRẠNG 19

1.1 Nhận xét một số website về môi trường 19

1.2 Tổng hợp, đánh giá chung các websites về môi trường 40

1.3 Tổng kết - Rút ra trang web mong muốn 40

2 XÁC ĐỊNH YÊU CẦU 41

2.1 Yêu cầu chức năng 41

2.2 Yêu cầu phi chức năng 42

3 MÔ HÌNH HÓA YÊU CẦU 43

3.1 Lược đồ use case 43

1.2 Lược đồ tuần tự 64

2 THIẾT KẾ CƠ SỞ DỮ LIỆU 69

2.1 Cấu trúc dữ liệu 69

2.2 Các ràng buộc toàn vẹn 73

2.3 Lược đồ thực thể quan hệ 75

2.4 Mô tả chi tiết các bảng dữ liệu 76

3 THIẾT KẾ GIAO DIỆN 69

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 108

1 CÀI ĐẶT 108

1.1 Thiết lập môi trường 108

1.2 Xây dựng cấu trúc project 108

2 KIỂM THỬ 111

PHẦN 3: PHẦN KẾT LUẬN 116

1 KẾT QUẢ ĐẠT ĐƯỢC 116

2 ƯU ĐIỂM 116

3 NHƯỢC ĐIỂM 117

4 HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI 117

TÀI LIỆU THAM KHẢO 118

Ajax: Asynchronous JavaScript and XML

API: Application Programming Interface

App: application

CSS: Cascading Style Sheets

DOM: Document Object Model

HTML: Hyper Text Markup Language

HTTP: HyperText Transfer Protocol

JS / js: Javascript

JSX: JavaScript XML

MVC: Model – View – Controller

REST: Representational State Transfer

UI: user interface

URL: Uniform Resource Locator

XML: eXtensible Markup Language

Hình 1-Mô hình MVC [6]

16

Hình 2-Mô hình hoạt động của DAO, BO và JAVA BEAN [6] .17

Hình 3-Hình ảnh trang giao diện trang chủ (admin, user) 20

Hình 4-Trang diễn đàn 20

Hình 5-Trang môi trường 21

Hình 6-Trang chi tiết sản phẩm 22

Hình 7-Form đăng kí 23

Hình 8-Form đăng nhập 24

Hình 9-Trang chủ 28

Hình 10-Trang Design 29

Hình 11-Trang chủ 30

Hình 12-Trang Recycling Locator 31

Hình 13-Trang Recycle week campaign 32

Hình 14-Trang chi tiết cho 1 thông tin 33

Hình 15-Trang Recycling locations 33

Hình 16-Trang chủ 34

Hình 17-Trang News & Stories 35

Hình 18-Trang enviroment & you 36

Hình 19-Trang chủ 37

Hình 20-Trang travle 38

Hình 21-Trang danh mục 38

Hình 22-Trang đăng kí 39

Hình 23-Lược đồ usecase phía người dùng cuối 43

Hình 24-Lược đồ usecase phía người quản trị 44

Hình 34-Lược đồ thực thể quan hệ 75

Hình 35-Hình ảnh giao diện trang chủ khách hàng 85

Hình 36-Hình ảnh trang chi tiết sản phẩm 87

Hình 37-Hình ảnh trang giao diện đăng nhập khách hàng 88

Hình 38-Hình ảnh trang giao diện đăng ký 89

Hình 39-Hình ảnh trang giao diện trang tin tức 91

Hình 40-Hình ảnh trang giao diện theo danh mục 1 loại 93

Hình 41-Hình ảnh trang giao diện giỏ hàng 94

Hình 42-Hình ảnh trang giao diện thông tin đặt hàng 95

Hình 43-Hình ảnh trang giao diện thông tin đơn hàng 96

Hình 44-Hình ảnh trang giao diện quản lý đơn hàng đã mua 98

Hình 45-Hình ảnh trang giao diện chi tiết hóa đơn 99

Hình 46-Hình ảnh trang giao diện đăng nhập admin 100

Hình 47-Hình ảnh trang giao diện chủ admin 101

Hình 48-Hình ảnh trang giao diện danh sách 1 loại sản phẩm 103

Hình 49-Hình ảnh trang giao diện thêm sản phẩm 104

Hình 50-Hình ảnh trang giao diện xóa sản phẩm 106

Hình 51-Hình ảnh trang giao diện trang thống kê 107

Bảng 1-Bảng so sánh giữa RDBMS và MongoDB 11

Bảng 2-Bảng đặc tả use case view home page 45

Bảng 3-Bảng đặc tả use case register 46

Bảng 4-Bảng đặc tả use case search product 47

Bảng 5-Bảng đặc tả use case view product detail 48

Bảng 6-Bảng đặc tả use case view news detail 48

Bảng 7-Bảng đặc tả use case login 49

Bảng 8-Bảng đặc tả use case login with Facebook 50

Bảng 9-Bảng đặc tả use case login with Google 51

Bảng 10-Bảng đặc tả use case View user info 52

Bảng 11-Bảng đặc tả use case update user info 53

Bảng 12-Bảng đặc tả use case add product 54

Bảng 13-Bảng đặc tả use case update products info 54

Bảng 14-Bảng đặc tả use case delete products 55

Bảng 15-Bảng đặc tả use case add news 56

Bảng 16-Bảng đặc tả use case update news info 57

Bảng 17-Bảng đặc tả use case delete news 58

Bảng 18-Bảng đặc tả use case buy product 60

Bảng 19-Bảng đặc tả use case Chat 60

Bảng 20-Bảng đặc tả use case logout 61

Bảng 21-Bảng đặc tả use case Statistic (Website owner) 62

Bảng 22-Bảng đặc tả use case add employee 62

Bảng 23-Mô tả chi tiết bảng dữ liệu Authorization 76

Bảng 24-Mô tả chi tiết bảng dữ liệu User 77

Bảng 34-Bảng mô tả chi tiết các đối tượng trên giao diện trang đăng nhập khách hàng 88

Bảng 35-Bảng mô tả chi tiết các đối tượng trên giao diện trang đăng ký khách hàng 89

Bảng 36-Bảng mô tả chi tiết các đối tượng trên giao diện trang tin tức 92

Bảng 37-Bảng mô tả chi tiết các đối tượng trên giao diện trang danh mục 1 loại sản phẩm 93

Bảng 38-Bảng mô tả chi tiết các đối tượng trên giao trang giỏ hàng 94

Bảng 39-Bảng mô tả chi tiết các đối tượng trên giao diện trang thông tin đặt hàng 95

Bảng 40-Bảng mô tả chi tiết các đối tượng trên trang thông tin đặt hàng 97

Bảng 41-Bảng mô tả chi tiết các đối tượng trên giao diện trang danh sách đơn đã đặt 98

Bảng 42-Bảng mô tả chi tiết các đối tượng trên giao diện trang chi tiêt hóa đơn 99

Bảng 43-Bảng mô tả chi tiết các đối tượng trên giao diện trang đăng nhập admin 100

Bảng 44-Bảng mô tả chi tiết các đối tượng trên giao diện trang chủ admin 102

Bảng 45-Bảng mô tả chi tiết các đối tượng trên giao diện trang danh sách 1 loại sản phẩm 104

Bảng 46-Bảng mô tả chi tiết các đối tượng trên giao diện trang thêm sản phẩm 105

Bảng 47-Bảng mô tả chi tiết các đối tượng trên giao diện trang sửa sản phẩm 106

Bảng 48-Bảng mô tả chi tiết các đối tượng trên giao diện trang thống kê 107

PHẦN 1: PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT ĐỀ TÀI

- Với thực trạng hiện nay môi trường sống có tầm ảnh hưởng rất quan trọng.Mọi công việc, công nghệ có ngày đổi mới, phát triển nhưng môi trường sống càngngày lại càng đi xuống thì cũng như chúng ta đang dần hủy hoại chính cuộc sống củamình

- Đặc biệt, bên cạnh sự phát triển của công nghệ thì môi trường sống lại ít đượcquan tâm Trong khi đó môi trường sống là cần thiết là nơi bắt đầu từ tất cả để họctập, làm việc Để mọi người có thể vừa đổi mới theo xu hướng công nghệ mà cũngvừa đề cao tầm quan trọng của môi trường sống hằng ngày Chúng em quyết địnhlàm một trang web bán các sản phẩm thân thiện với môi trường cũng như thông báobằng những tin tức mới nhất được cập nhập về môi trường sống xung quanh Từ đómọi người sẽ nắm những thông tin nhanh hơn, và ý thức hơn

- Vậy nên mọi người hãy thử dùng các sản phẩm thân thiện với môi trườnghằng ngày Hay muốn biết và yêu môi trường chúng ta sống Để đáp ứng và truyền tảiyêu cầu của khách hàng đều sẽ thực hiện một cách nhanh chóng, không mất nhiều thờigian chờ đợi như trước đây cần một trang web về môi trường

2 MỤC TIÊU CỦA ĐỀ TÀI

 Tìm hiểu các công nghệ liên quan đến đề tài như:

+ Tìm hiểu HTML5, CSS3

+ Tìm hiểu Javascript, Bootstrap

+ Tìm hiểu Frameword Express

+ Tìm hiểu kỹ thuật NodeJS

o Đăng nhập nhanh bằng Google/Facebook.

o Quản lý tài khoản (Xem/Cập nhật thông tin)

o Tìm kiếm sản phẩm có sẵn Nhận thông báo khi không tìm thấy sản phẩm

o Xem chi tiết sản phẩm

o Xem chi tiết tin tức về môi trường

o Chat online, tương tác giữa người dùng với người dùng, giữa người

dùng với người quản lý trang web

o Xem sản phẩm giỏ hàng

o Tạo sản phẩm, chỉnh sửa sản phẩm vào website

o Tạo tin tức, chỉnh sửa tin tức vào website

o Lọc sản phẩm theo giá, tên sản phẩm

3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 3.1 Đối tượng nghiên cứu

 Công nghệ Express, NodeJS, MongoDb Atlas

 Ngôn ngữ: Javascript

 Các thư viện hỗ trợ:

 Lĩnh vực mà website phát triển: Bán sản phẩm thân thiện với môi trường

 Mô hình triển khai: Mô hình MVC

3.2 Phạm vi nghiên cứu

 Phạm vi nghiên cứu hướng đến các mô hình mua bán sản phẩm thân thiện

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

 Nghiên cứu hiểu rõ các thành phần cơ bản của công nghệ như: Express, NodeJS, Mongodb Atlas

 Tìm hiểu ngôn ngữ: Javascript

 Sử dụng công nghệ xây dựng thành công website bán các sản phẩm thân thiện với môi trường

 Phát triển đầy đủ các chức năng cho người dùng cuối như:đăng ký, đăng nhập

bằng email, đăng nhập bằng Google/Facebook, quản lý tài khoản, xem danhmục sản phẩm, tìm kiếm sản phẩm, lọc sản phẩm theo giá, xem chi tiết sảnphẩm, xem tin tức, mua hàng

 Phát triển đầy đủ các tính năng cho quản trị viên: quản lý sản phẩm, quản lý tin tức, quản lý thông tin khách hàng, nhân viên

 Phát triển các chức năng quản trị cho website như: quản lý người dùng, quản

lý sản phẩm, tin tức, thống kê, báo cáo

PHẦN 2: PHẦN NỘI DUNG

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1 TÌM HIỂU CÔNG NGHỆ 1.1 Tìm hiểu Javascript

1.1.1 Khái niệm Javascript

 JavaScript là một ngôn ngữ lập trình đa nền tảng (cross-platform), ngônngữ lập trình kịch bản, hướng đối tượng JavaScript là một ngôn ngữ nhỏ và nhẹ(small and lightweight) Khi nằm bên trong một môi trường (host environment),JavaScript có thể kết nối tới các object của môi trường đó và cung cấp các cách quản

lý chúng (object)

 JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như: Array,

Date, và Math, và các yếu tố cốt lõi của ngôn ngữ lập trình như: toán tử(operators), cấu trúc điều khiển (control structures), và câu lệnh.JavaScript có thể được mở rộng cho nhiều mục đích bằng việc bổ sungthêm các object; Ví dụ:

o Client-side JavaScript - JavaScript phía máy khách, JavaScript được

mở rộng bằng cách cung cấp các object để quản lý trình duyệt và Document Object Model (DOM) của nó Ví dụ, phần mở rộng phía máy khách cho phép một ứng dụng tác động tới các yếu tố trên một trang HTML và phản hồi giống các tác động của người dùng như click chuột, nhập form và chuyển trang

o Server-side JavaScript - JavaScript phía Server, JavaScript được mở

rộng bằng cách cung cấp thêm các đối tượng cần thiết để chạy JavaScript trên máy chủ Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ liệu (database), cung cấp thông tin một cách liên tục từ một yêu cầu tới phần khác của ứng dụng, hoặcthực hiện thao tác với các tập tin trên máy chủ

1.1.2 Tiêu chuẩn ECMAScript.

 JavaScript được tiêu chuẩn hóa tại Ecma International — the Europeanassociation for standardizing information and communication systems, Liên kết Châu

Âu cho các tiêu chuẩn hóa hệ thống thông tin và truyền thông (ECMA trước đây làviết tắt cho the European Computer Manufacturers Association) cung cấp một tiêuchuẩn hóa, nền tảng ngôn ngữ lập trình mở quốc tế lên JavaScript Phiên bản đã tiêuchuẩn hóa của JavaScript được gọi là ECMAScript, làm việc giống với cái cách mà tất

cả ứng dụng đã được hỗ trợ theo tiêu chuẩn

 Các công ty có thể sử dụng tiêu chuẩn ngôn ngữ mở (open standardlanguage) để phát triển các implementation của JavaScript riêng cho họ Tiêu chuẩnECMAScript là tài liệu nằm trong tiêu chuẩn ECMA-262 (ECMA-262 specification).Xem New in JavaScript để biết thêm về sự khác nhau giữa các phiên bản JavaScriptcũng như sự khác nhau của phiên bản tiêu chuẩn ECMAScript (ECMAScriptspecification editions)

 Tiêu chuẩn ECMA-262 cũng đã được phê duyệt bởi ISO (InternationalOrganization for Standardization) tại ISO-16262 Bạn cũng có thể tìm tiêu chuẩn trênthe Ecma International website Tiêu chuẩn ECMAScript không bao gồm các mô tảcho Document Object Model (DOM), nó được tiêu chuẩn hóa bởi World Wide WebConsortium (W3C)

 DOM định nghĩa cách mà các đối tượng trong HTML tiếp xúc với các

đoạn script của bạn Để có được một cảm nhận tốt hơn về các công nghệkhác nhau được sử dụng khi lập trình với JavaScript, hãy tham khảo bàiviết tổng quan về công nghệ JavaScript [1].

1.2 Tìm hiểu NodeJS

 Node.js chứa một thư viện built-in cho phép các ứng dụng hoạt động nhưmột Webserver mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS.

 Node.js cung cấp kiến trúc hướng sự kiện (event-driven) và non-blocking I/

O API, tối ưu hóa thông lượng của ứng dụng và có khả năng mở rộng cao Mọi hàm trongNode.js là không đồng bộ (asynchronous) Do đó, các tác vụ đều được xử lý và thực thi ởchế độ nền (background processing)

 Node.js áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộngnhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể

1.2.2 Những ứng dụng sử dụng NodeJS.

 Xây dựng websocket server (Chat server)

 Hệ thống Notification (Giống như facebook hay Twitter)

 Ứng dụng upload file trên client

 Các máy chủ quảng cáo

 Các ứng dụng dữ liệu thời gian thực khác

1.2.3 Ưu và nhược điểm NodeJS.

 Đặc điểm nổi bật của Node.js là nó nhận và xử lý nhiều kết nối chỉvới một single-thread Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhấtkhi không phải tạo thread mới cho mỗi truy vấn giống PHP Ngoài ra, tận dụng ưuđiểm non-blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên củaserver mà không tạo ra độ trễ như PHP

 JSON APIs Với cơ chế event-driven, non-blocking I/O(Input/Output)

và mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làmbằng JSON

 Ứng dụng trên 1 trang (Single page Application) Nếu bạn định viết 1ứng dụng thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm Với khả năng xử

lý nhiều Request/s đồng thời thời gian phản hồi

6

nhanh Các ứng dụng bạn định viết không muốn nó tải lại trang, gồmrất nhiều request từ người dùng cần sự hoạt động nhanh để thể hiện sựchuyên nghiệp thì NodeJS sẽ là sự lựa chọn của bạn.

 Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động Tức

là NodeJS có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạtđộng đạt mức tối đa nhất và tuyệt vời nhất

 Streamming Data (Luồng dữ liệu) Các web thông thường gửi HTTPrequest và nhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cựclớn, NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đahoạt động cho các luồng dữ liệu khác

 Ứng dụng Web thời gian thực Với sự ra đời của các ứng dụng di động

& HTML 5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực(real-time applications) như ứng dụng chat, các dịch vụ

mạng xã hội như Facebook, Twitter

 Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tàinguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụngtương tự như vậy thì không nên dùng NodeJS (Lý do: NodeJS được viết bằng C++ &Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút).Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng hiệu suất tốiđa!

 NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python NET …thìviệc cuối cùng là phát triển các App Web NodeJS mới sơ khai như các ngôn ngữ lậptrình khác Vậy nên đừng hi vọng NodeJS sẽ hơn PHP, Ruby, Python ở thời điểm này.Nhưng với NodeJS bạn có thể có 1 ứng dụng như mong đợi, điều đó là chắc chắn!

Node.js hay bị rơi vào trường hợp thắt cổ chai khi làm việc với nhữngfile dung lượng lớn.

- Một ứng dụng chỉ toàn CRUD: Node.js không nhanh hơn PHP khi bạnlàm các tác vụ mang nặng tính I/O như vậy Ngoài ra, với sự ổn định lâu dài của cácwebserver script khác, các tác vụ CRUD của nó đã được tối ưu hóa Còn Node.js? Nó sẽlòi ra những API cực kỳ ngớ ngẩn

- Khi bạn cần sự ổn định trong ứng dụng của bạn: Chỉ với 4 năm pháttriển của mình (2009-2013), version của Node.js đã là 0.10.15 (hiện tại tới thời điểmnày là v13.5.0) Mọi API đều có thể thay đổi – một cách không tương thích ngược –hãy thật cẩn thận với những API mà bạn đang dùng, và luôn đặt câu hỏi: “Khi nó thayđổi, nó sẽ ảnh hưởng gì đến dự án của tôi?”

- Và quan trọng nhất: Bạn chưa hiểu hết về Node.js! Node.js cực kỳnguy hiểm trong trường hợp này, bạn sẽ rơi vào một thế giới đầy rẫy cạm bẫy, khókhăn Với phần lớn các API hoạt động theo phương thức non-blocking/async việckhông hiểu rõ vấn đề sẽ làm cho việc xuất hiện những error mà thậm chí bạn khôngbiết nó xuất phát từ đâu? Và mệt mỏi hơn nữa: Khi cộng đồng Node.js chưa đủ lớnmạnh, và sẽ ít có sự support từ cộng đồng Khi mà phần lớn cộng đồng cũng khôngkhá hơn bạn là bao

 Nên dùng NodeJS khi:

- Node.js thực sự tỏa sáng trong việc xây dựng RESTful API (json) Gầnnhư không có ngôn ngữ nào xử lý JSON dễ dàng hơn Javascript, chưa kể các API serverthường không phải thực hiện những xử lý nặng nề nhưng lượng concurrent request thì rấtcao Mà Node.js thì xử lý non-blocking Chẳng còn gì thích hợp hơn Node.js trong trườnghợp này!

- Những ứng dụng đòi hỏi các giao thức kết nối khác chứ không phảichỉ có http Với việc hỗ trợ giao thức tcp, từ nó bạn có thể xây dựng bất kỳ một giaothức custom nào đó một cách dễ dàng

- Những ứng dụng thời gian thực: Khỏi phải nói vì Node.js dường như sinh ra để làm việc này!

- Những website stateful Node.js xử lý mọi request trên cùng một processgiúp cho việc xây dựng các bộ nhớ đệm chưa bao giờ đơn giản

đến thế: Hãy lưu nó vào một biến global, và thế là mọi request đều cóthể truy cập đến bộ nhớ đệm đó Caching sẽ không còn quá đau đầunhư trước đây, và bạn có thể lưu cũng như chia sẻ trạng thái của mộtclient với các client khác ngay trong ngôn ngữ, chứ bạn không cầnthông qua các bộ nhớ ngoài!

- Quan trọng nhất: yêu thích và muốn sử dụng nó [2].

1.2.5 Những kết luận sai lầm về NodeJS.

 Thứ nhất, Nodejs là một nền tảng (platform), không phải Web

Framework, cũng không phải ngôn ngữ lập trình

 Thứ hai, Nodejs không hỗ trợ đa luồng, nó là một máy chủ đơn luồng

 Và một điều nữa, Nodejs không dành cho người mới tinh mà chưabiết gì về lập trình, vì như đã nói ở trên, Nodejs không phải là ngôn ngữ lập trình, đểhọc được Nodejs thì bạn cần phải biết về Javascript, kỹ thuật lập trình, một số giaothức

1.2.6 Những công ty lớn nào đang sử dụng NodeJS.

 Amazon, Ebay, Linkedin, Microsoft, Paypal, Trello, Uber và cònnhiều cái tên nổi tiếng khác nữa Theo như Paypal thì sử dụng Nodejs làm giảm thờigian đáp ứng lên tới 35%

 Còn về phía Linkedin chuyển từ Ruby sang sử dụng Nodejs để xử lýcác truy cập từ mobile, và con số Server sử dụng giảm từ 30 còn 3, giảm gần 90% [3].

1.3 Tìm hiểu Express Framework của NodeJS.

 Express.js là một Framework nhỏ, nhưng linh hoạt được xây dựng trênnền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc

 Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ của NodeJS.

 Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sử dụng ExpressJS như một core function, chẳng hạn: SailsJS, MEAN [4]

 Các thuật ngữ hay sử dụng trong MongoDB.

 -id – Là trường bắt buộc có trong mỗi document Trường -id đại diện cho một giá trị duy nhất trong document MongoDB Trường -id cũng có thể được hiểu là khóa chính trong document Nếu bạn thêm mới một

document thì MongoDB sẽ tự động sinh ra một -id đại diện cho document đó và là duy nhất trong cơ sở dữ liệu MongoDB

 Collection – Là nhóm của nhiều document trong MongoDB Collection có thể được hiểu là một bảng tương ứng trong cơ sở dữ liệu RDBMS

(Relational Database Management System) Collection nằm trong một cơ

sở dữ liệu duy nhất Các collection không phải định nghĩa các cột, các hàng hay kiểu dữ liệu trước

 Cursor – Đây là một con trỏ đến tập kết quả của một truy vấn Máy khách

có thể lặp qua một con trỏ để lấy kết quả

 Database – Nơi chứa các Collection, giống với cơ sở dữ liệu RDMSchúng chứa các bảng Mỗi Database có một tập tin riêng lưu trữ trên bộ nhớ vật lý.Một mấy chủ MongoDB có thể chứa nhiều Database

 Document – Một bản ghi thuộc một Collection thì được gọi là một

Document Các Document lần lượt bao gồm các trường tên và giá trị

 Field – Là cặp name – value trong một document Một document có thểkhông cần có đủ các Field Các trường giống các cột ở cơ sở dữ liệu quan hệ

 JSON – Viết tắt của JavaScript Object Notation Con người có thể đọcđược ở định dạng văn bản đơn giản thể hiện cho các dữ liệu có cấu trúc Hiện tạiJSON đang hỗ trợ rất nhiều ngôn ngữ lập trình

 Index – Là những cấu trúc dữ liệu đặc biệt, dùng để chứa một phần nhỏ củacác tập dữ liệu một cách dễ dàng để quét Chỉ số lưu trữ giá trị của một fields cụ thể hoặcthiết lập các fields, sắp xếp theo giá trị của các fields này Index hỗ trợ độ phân tích mộtcách hiệu quả các truy vấn Nếu không có chỉ mục, MongoDB sẽ phải quét tất cả cácdocuments của collection để chọn ra những document phù hợp với câu truy vấn Quátrình quét này là không hiệu quả và yêu cầu MongoDB để xử lý một khối lượng lớn dữliệu

 So sánh giữa RDBMS (Relational database management system) và MongoDB.

 Các kiểu dữ liệu trong MongoDB.

- Chuỗi: Đây là kiểu dữ liệu được sử dụng phổ biến nhất để lưu giữ dữ liệu Chuỗi trong MongoDB phải là UTF-8 hợp lệ

- Số nguyên: Kiểu dữ liệu này được sử dụng để lưu một giá trị số Số nguyên có thể là 32bit hoặc 64bit phụ thuộc vào Server

- Boolean: Kiểu dữ liệu này được sử dụng để lưu giữ một giá trị Boolean (true/false)

- Double: Kiểu dữ liệu này được sử dụng để lưu các giá trị số thực dấu chấm

- Null: Kiểu dữ liệu này được sử dụng để lưu một giá trị Null

- Symbol: Kiểu dữ liệu này được sử dụng giống như một chuỗi

- Date: Kiểu dữ liệu này được sử dụng để lưu giữ date và time hiện tại trong định dạng UNIX time

- Object ID: Kiểu dữ liệu này được sử dụng để lưu giữ ID của Document

- Binary data: Kiểu dữ liệu này được sử dụng để lưu giữ dữ liệu nhị phân

- Code: Kiểu dữ liệu này được sử dụng để lưu giữ JavaScrip code vào trong Document

- Regular expression: Kiểu dữ liệu này được sử dụng để lưu giữ Regular Expresion [5]

1.5 Tìm hiểu về Socket.io

 Định nghĩa Socket.io

- Để xây dựng một ứng dụng realtime cần sử dụng socketio Socketio sẽgiúp các bên ở những địa điểm khác nhau kết nối với nhau, truyền dữ liệu ngay lập tứcthông qua server trung gian Socketio có thể được sử dụng trong nhiều ứng dụng nhưchat, game online, cập nhật kết quả của một trận đấu đang xảy ra,…

- Socketio không phải là một ngôn ngữ, mà chỉ là 1 công cụ giúp thực hiệnnhững ứng dụng realtime Vì thế, không thể sử dụng socketio để thay thế hoàn toàncho một ngôn ngữ, mà phải sử dụng kết hợp với một ngôn ngữ khác Ngôn ngữ đó cóthể là php, asp.net, nodejs,…

- Trước Phía server Đây là nơi sẽ cài đặt socket io Ngôn ngữ để dựngserver có thể là php, asp.net, nodejs,… Tuy nhiên, tùy vào ngôn ngữ lựa chọn mà cáchcấu trúc server khác nhau Ở đây, nếu được thì khuyến khích sử dụng nodejs để dựngserver, vì như vậy có thể cài trực tiếp socketio vào cùng một server Nếu sử dụng phpthì phải cài thêm những package khác, hoặc phải chuẩn bị riêng server để chạysocketio

- Phía client: Ở phía client sẽ xây dựng giao diện người dùng Ở đây có thể

sử dụng js, hoặc các thư viện của js như jquery,… Nói chung là ngôn ngữ gì cũngđược

package cần thiết trên server để có thể làm web và ứng dụng realtime Đểcài những package này mở màn hình cmd > cd đến thư mục Demo > gõ

dòng lệnh npm install express ejs socketio Khi cài đặt thành công, hệ thống sẽ tự tạo thư mục nodemodules.

 Cơ chế hoạt động của Socket.io

 Các hàm các middleware của passport

 Khai báo sử dụng Socket.io

- Cơ chế hoạt động của một ứng dụng realtime đó là thông qua server đểlắng nghe (listen) data và truyền data về các máy client Vì vậy cần cài khai báo sửdụng socketio ở cả phía server và client

 Cơ chế lắng nghe và truyền dữ liệu

- Để lắng nghe data, ta sử dụng câu lệnh socket.on(), để phát dữ liệu thì

- Trước khi bắt tay vào thực hiện phân quyền cho projectn hay nói cách khác

là sử dụng passport cho phần phân quyền Để sử dụng được passport bạn có tối thiểu 3bước : Require thằng passport và chèn 2 thằng middile của

nó vào express là passport.initialize() và passport.session() Chú ý là ứng dụng express của bạn cần sử dụng đến express-session.

 Xây dựng chức năng login sử dụng passport

 Trước khi bắt tay vào thực hiện phân quyền cho projectn hay nói cáchkhác là sử dụng passport cho phần phân quyền Để sử dụng được passport bạn có tốithiểu 3 bước : Require thằng passport và chèn 2 thằng middile của nó vào express làpassport.initialize() và passport.session() Chú ý là ứng dụng express của bạn cần sửdụng đến express-session

 Khi có request Login sẽ gọi đến thằng passport.serializeUser mà ta đãđịnh nghĩa trước đó Hàm này truy cập vào đối tượng user mà ta trả về chomiddleware passport.authenticate và xác định xem thành phần nào của đối tượng sẽlưu vào trong session Kết quả của hàm này là ta sẽ có đối tượngreq.session.passport.user = các thông tin ta truyền vào trong serializeUser.Trong ví dụbên trên thì nó là user Đồng thời với trên passport cũng có gắn thông tin user vàoreq.user

 Khi request được tính là đã xác thực nó sẽ gọi hàmpassport.deserializeUser Hàm này sử dụng thông tin trong session để lấy dữ liệu đầy

đủ về thằng user rồi gắn nó vào req.user

 Các hàm các middleware của passport

 passport.initialize : middleware được gọi ở từng request, kiểm tra session lấy ra passport.user nếu chưa có thì tạo rỗng

 passport.session: middleware sử dụng kịch bản Passport , sử dụng session lấy thông tin user rồi gắn vào req.user

 passport.deserializeUser : hàm được gọi bởi passport.session Giúp ta lấy

dữ liệu user dựa vào thông tin lưu trên session và gắn vào req.user

2 TÌM HIỂU MÔ HÌNH MVC TRONG XÂY DỰNG WEBSITE 2.1 Tìm hiểu mô hình MVC

 MVC viết tắt của 3 từ đó là Model – View – Controller (MVC) là mẫu thiết

kế nhằm mục tiêu chia tách phần Giao diện và Code để dễ quản lý, phát triển và bảotrì

 Mỗi phần lại có có một nhiệm vụ xử lý khác nhau, đối với trong mô hình mvc trong java nói riêng và mô hình mvc nói chung thì:

o Model: Tương tác và truy xuất dữ liệu đến database (cơ sở dữ liệu)

o View: Giao diện mà người dùng có thể nhìn thấy, tuy nhiên thường

view chỉ có một nhiệm vụ duy nhất là hiển thị dữ liệu Trong Java web view chính là file jsp

o Controller: Nó có nhiệm vụ điều khiển tương tác giữa Model và View

cũng như xử lý logic nghiệp vụ (Business) Trong Java web controller

Controller xử lý nghiệp vụ, logic business và gữi trả lại cho view View thựchiện nhiệm vụ hiển thị dữ liệu đúng kết quả cho người dùng yêu cầu.

2.2 Chi tiết từng lớp mô hình MVC

2.2.1 Model

 Đây là phần truy vấn csdl và kiểm tra logic bao gồm 3 thành phần là BO(business object), DAO (data access object) và java bean Chức năng của các thànhphần như sau:

o BO: đây là phần xử lý logic của chương trình, là trung gian giữa Controller và

DAO, các lớp khác muốn giao tiếp với csdl phải thông qua trung giang BO

Nó chỉ biết sự tồn tại của DAO và java bean

o DAO: đây là phần làm việc trực tiếp với csdl, chúc năng của nó là truy vấn

csdl, chú ý rằng việc giao tiếp csdl chỉ duy nhất xuất hiện ở lớp DAO, các lớp khác muốn làm việc với csdl phải thông qua nó Nó chỉ biết sự tồn tại của java bean

o JAVA BEAN: đây là những class java thường được xây dựng mô phỏng lại 1

cấu trúc bản dữ liệu trong csdl gồm các cấu trúc getter và setter Nó được vínhư mạch máu vì nó xuất hiện ở tất cả 3 thành phần là Model, Controller và

cả View, nó giúp 3 thành phần của MVC giao tiếp được với nhau Java bean không cần biết sự tồn tại của bất kỳ lớp nào khác, nó chỉ đơn thuần là

1 class thuần java

 Mô hình hoạt động của DAO, BO và java bean:

2.2.2 View

 Phần này quy định về giao diện và tương tác với người dùng thông qua các mãhtml và javascript Ở đây ta sử dụng jsp để thay thế cho thuần html để tạo ra 1 trangweb động Các views sẽ được Controller điều hướng đến và chúng chỉ biết đến sự tồntại của java bean

2.2.3 Controller

 Nó có nhiệm vụ điều khiển tương tác giữa Model và View cũng như xử lý logicnghiệp vụ (Business) Có thể giải thích kỹ hơn nữa đối với trong Java thì controller lấy

dữ liệu từ model sau đó gữi đến view

2.3 Ưu - Nhược điểm mô hình MVC.

2.3.1 Ưu điểm

 Theo tôi việc sử dụng MVC mang tính chất chuyên nghiệp trong lập trình web

vì nó mang tính logic cao nhưng đơn giản, phân tách rõ ràng các chức năng cần làmcủa một ứng dụng, qua đó nhiều người có thể làm chung dự án, phát hiện và sửa lỗi,

dễ nâng cấp tính năng đồng thời khi bảo trì cũng rất dễ dàng

2.3.2 Nhược điểm

 MVC khi dùng trong các project nhỏ sẽ gây phức tạp vấn đề cần giải quyết

 Mặc dù, MVC tỏ ra lợi thế hơn nhiều so với cách lập trình thông thường NhưngMVC luôn phải nạp, load những thư viện đồ sộ để xử lý dữ liệu Chính điều này làmcho mô hình trở nên chậm chạp hơn nhiều so với việc code tay thuần túy

 MVC đòi hỏi người tiếp cận phải biết qua OOP, có kinh nghiệm tương đối choviệc thiết lập và xây dựng một ứng dụng hoàn chỉnh Sẽ rất khó khăn nếu MVC tậndụng mảng là thành phần chính cho việc truy xuất dữ liệu Nhất là với việc sử dụngactive record để viết ứng dụng Chúng luôn cần người viết phải nắm vứng mô hìnhmảng đa chiều [6]

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

1 KHẢO SÁT HIỆN TRẠNG

1.1 Nhận xét một số website về môi trường

1.1.1 Website : https://yeumoitruong.vn

1.1.1.1 Một số hình ảnh

Hình 3-Hình ảnh trang giao diện trang chủ (admin, user )

Hình 4-Trang diễn đàn

Hình 5-Trang môi trường

Hình 6-Trang chi tiết sản phẩm

Hình 7-Form đăng kí

Hình 8-Form đăng nhập

1.1.1.2 Ưu điểm

1.1.1.2.1 Giao diện

- Gam màu: xanh, trắng, xám chủ đạo hợp với đề tài môi trường, nhẹ nhàng

- Hiệu ứng: slide ảnh nhiều, khá hợp

- Bố cục sắp xếp: header, footer, thanh menu, nội dung khá đầy đủ

- Dữ liệu sản phẩm: nhiều loại khác nhau

- Có logo, popup quản cáo

1.1.1.2.2 Chức năng

- Tìm kiếm nhanh

- Chuyển trang nhanh

- Tích hợp diễn đàn tin tức và bán hàng khá hay

- Hỗ trợ khách hàng