Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng công nghệ mern stack và google maps api

 Thấy được sự bất cập của mô hình này và các yếu điểm của các cửa hàng khi kinh doanh offline, một website tìm kiếm cửa hàng đang có sẵn sản phẩm là một điều rất cần thiết.. Và hiện nay

THÀNH PHỐ HỒ CHÍ MINH

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

PHÁT TRIỂN WEBSITE TÌM KIẾM CỬA HÀNG HÓA SẢN PHẨM SỬ DỤNG CÔNG NGHỆ MERN STACKVÀ GOOGLE MAPS API

GVHD: LÊ VĂN VINHSVTH: PHẠM THẾ HỮU MSSV:15110225

SVTH: NGUYỄN CẢNH TOÀNMSSV: 15110335

SKL 0 0 6 7 5 1

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

VÀ GOOGLE MAPS API

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

TS LÊ VĂN VINH PHẠM THẾ HỮU - 15110225 NGUYỄN CẢNH TOÀN – 15110335

***** *****

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

công nghệ MERN STACK và GOOGLE MAPS API

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

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

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

Họ tên sinh viên 1: PHẠM THẾ HỮU MSSV: 15110225

Họ tên sinh viên 2: NGUYỄN CẢNH TOÀN MSSV: 15110335

Chuyên ngành: SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài: Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng

***** *****

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Ế HỮU MSSV: 15110225

Họ tên sinh viên 2: NGUYỄN CẢNH TOÀN MSSV: 15110335

Chuyên ngành: SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài: Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng

công nghệ MERN STACK và GOOGLE MAPS API

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

Giáo viên phản biện

(Ký & ghi rõ họ tên)

Nhóm em xin chân thành cảm ơn khoa CÔNG NGHỆ THÔNG TIN, BỘ MÔN CÔ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ĂN VINH, 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 khoa Cô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ích lũ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 do khả 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 mong nhậ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 2019

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

PHẠM THẾ HỮU - 15110225 NGUYỄN CẢNH TOÀN - 15110225

KHOA CNTT

*****

Độc lập - Tự do - Hạnh phúc

*****

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

Họ tên sinh viên 1: PHẠM THẾ HỮU MSSV: 15110225

Họ tên sinh viên 2: NGUYỄN CẢNH TOÀN MSSV: 15110335

Chuyên ngành: SƯ PHẠM CÔNG NGHỆ THÔNG TIN

Tên đề tài: Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng

công nghệ MERN STACK và GOOGLE MAPS API

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

Thởi gian thực hiện: từ 01/09/2019 – 31/12/2019

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

 Tìm hiểu MERN STACK và GOOGLE MAPS API phát triển website Tìm kiếm cửa hàng hóa sản phẩm

 Khảo sát hiện trạng, đánh giá các website tìm kiếm cửa hàng xung quanh hiện

có

 Phân tích nghiệp vụ của một website tìm kiếm cửa hàng hiện có

 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

1.3.2 Phạm vi nghiên cứu

1.4 Kết quả dự kiến đạt được

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

2.1.1 Tìm hiểu MERN STACK

2.1.2 Ứng dụng MERN Stack trong phát triển website

2.1.2.1 Giới thiệu công nghệ Stack

2.1.2.2 Giới thiệu MERN Stack

2.1.2.3 Nhưng điểm nổi bật trong MERN Stack

2.1.3 Tìm hiểu Google Maps Api

2.1.3.1 Giới thiệu Google Maps Api

2.1.3.2 Một số ứng dụng của Google Maps Api

2.1.4 Tìm hiểu mô hình MVC trong xây dựng website

2.1.4.1 Tìm hiểu mô hình MVC

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

2.1.4.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ẦU 2.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

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

2.3.2.3 Lược đồ thực thể liên kết

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

2.3.3 Thiết kế giao diện

2.4 Chương 4: cài đặt và kiểm thử

2.4.1 Cài đặt

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

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

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

4 TÀI LIỆU THAM KHẢO

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

2 Được thầy hướng dẫn định hướng về các chức năng cần phát triển, các lựa chọn về mặt công nghệ để hiện thực

3 Đã kháo sát 3 trang web về tìm kiếm sản phẩm

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

phẩm

2 09/09 – 15/09

1 Xây dựng Use case Diagram

2 Xây dựng Sequence Diagram

3 Thiết kế cơ sở dữ liệu

1 Hoàn thành Use case Diagram ban đầu

2 Hoàn thành Sequence Diagram ban đầu

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

3 16/09 – 29/09

1 Chỉnh sửa hoàn thiện Use case Diagram

2 Viết đặc tả Use case

3 Chỉnh sửa hoàn thiện Sequence Diagram

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

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

4 30/09 – 13/10 1 Thiết kế giao diện

6 28/10 – 10/11 1 Xây dựng các chức năng

người dùng USER

1 Đã hoàn thành các chức năng người dùng USER

7 11/11 – 24/11 1 Xây dựng các chức năng

người dùng ADMIN

1 Đã hoàn thành các chức năng người dùng ADMIN

8 25/11 – 08/12 1 Hoàn thành các chức năng

trong Use case Diagram

1 Đã hoàn thành các chức năng trong Use case Diagram

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

Ý kiến của GVHD

(Ký và ghi rõ họ tên)

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

Người viết đề cương

(Ký và ghi rõ họ tên)

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 2

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 MERN STACK 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 ReactJS 13

2 ỨNG DỤNG MERN STACK TRONG PHÁT TRIỂN WEBSITE 14

2.1 Khái niệm về công nghệ Stack 14

2.2 Khái niệm MERN Stack 14

2.3 Những điểm nổi bật trong MERN Stack 15

3 TÌM HIỂU GOOGLE MAPS API 15

3.1 Giới thiệu Google Maps API 15

3.2 Một số ứng dụng của Google Maps API 15

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

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

4.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 Google Maps (https://www.google.com/maps) 19

1.2 Shopee: (https://shopee.vn) 20

1.3 Tiki (https://tiki.vn) 21

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

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

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

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

3.1 Lược đồ use case 25

3.2 Đặc tả use case 27

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 45

1 THIẾT KẾ HỆ THỐNG 45

1.1 Lược đồ lớp 45

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

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

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

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

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

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

3 THIẾT KẾ GIAO DIỆN 73

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

1 CÀI ĐẶT 89

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

2 KIỂM THỬ 91

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

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

2 ƯU ĐIỂM 97

3 NHƯỢC ĐIỂM 98

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

TÀI LIỆU THAM KHẢO 99

Hình 1-Mô hình MVC 16

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

Hình 3-Trang tìm kiếm google.com/maps 19

Hình 4-Trang tìm kiếm shopee.vn 20

Hình 5-Trang tìm kiếm tiki.vn 22

Hình 6-Lược đồ use case phía người dùng cuối 25

Hình 7-Lược đồ use case phía người quản trị 26

Hình 8-Lược đồ lớp – Model Layer 45

Hình 9-Lược đồ lớp – MVC pattern 46

Hình 10-Lược đồ tuân tự View home page 47

Hình 11-Lược đồ tuần tự Search product 47

Hình 12-Lược đồ tuần tự View product detail 48

Hình 13-Lược đồ tuân tự View store detail 48

Hình 14-Lược đồ tuân tự Register 49

Hình 15-Lược đồ tuân tự Login 49

Hình 16-Lược đồ tuân tự Forget password 50

Hình 17-Lược đồ tuân tự Update info 50

Hình 18-Lược đồ tuần tự Change password 51

Hình 19-Lược đồ tuần tự Change email 51

Hình 20-Lược đồ tuần tự Change phone 52

Hình 21-Lược đồ tuần tự Add store 52

Hình 22-Lược đồ tuần tự Update store 53

Hình 23-Lược đồ tuần tự Delete store 53

Hình 24-Lược đồ tuần tự Rate product 54

Hình 25-Lược đồ tuần tự Comment/ Reply comment 54

Hình 26-Lược đồ tuần tự Logout 55

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

Hình 28-Hình ảnh giao diện trang chủ 73

Hình 29-Hình ảnh trang chi tiết sản phẩm 75

Hình 30-Hình ảnh trang giao diện đăng nhập 77

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

Hình 33-Hình ảnh trang giao diện thông tin cá nhân 80

Hình 34-Hình ảnh trang giao diện quản lý cửa hàng 82

Hình 35-Hình ảnh trang giao diện quản lý sản phẩm 84

Hình 36-Hình ảnh trang giao diện mua gói cửa hàng 85

Hình 37-Hình ảnh trang giao diện đổi email 86

Hình 38-Hình ảnh trang giao diện đổi số điện thoại 87

Hình 39-Hình ảnh trang giao diện đổi mật khẩu 88

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 27

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

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

Bảng 5-Bảng đặc tả use case view hostel detail 30

Bảng 6-Bảng đặc tả use case view store detail 31

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

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

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

Bảng 10-Bảng đặc tả use case restore Password 35

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

Bảng 12-Bảng đặc tả use case update user info 36

Bảng 13-Bảng đặc tả use case change password 37

Bảng 14-Bảng đặc tả use case Receive notify for product 37

Bảng 15-Bảng đặc tả use case Cancel notify 38

Bảng 16-Bảng đặc tả use case add store 39

Bảng 17-Bảng đặc tả use case update store info 40

Bảng 18-Bảng đặc tả use case delete store 40

Bảng 19-Bảng đặc tả use case rate product 41

Bảng 20-Bảng đặc tả use case Comment 41

Bảng 21-Bảng đặc tả use case logout 42

Bảng 22-Bảng đặc tả use case Statistic (Store owner) 42

Bảng 23-Bảng đặc tả use case Statistic (Admin) 43

Bảng 25-Bảng đặc tả use case add employee 44

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

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

Bảng 30-Mô tả chi tiết bảng dữ liệu City 66

Bảng 31-Mô tả chi tiết bảng dữ liệu District 66

Bảng 32-Mô tả chi tiết bảng dữ liệu Street 67

Bảng 33-Mô tả chi tiết bảng dữ liệu StoreCategory 67

Bảng 35-Mô tả chi tiết bảng dữ liệu Product 68

Bảng 36-Mô tả chi tiết bảng dữ liệu Store 71

Bảng 37-Mô tả chi tiết bảng dữ liệu Conversation 71

Bảng 38-Mô tả chi tiết bảng dữ liệu Comment 72

Bảng 39-Mô tả chi tiết bảng dữ liệu Employee 72

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

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

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

Bảng 43-Bảng mô tả chi tiết các đối tượng trên giao trang diện đăng ký 78

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

Bảng 45-Bảng mô tả chi tiết các đối tượng trên giao diện trang thông tin cá nhân 81

Bảng 46-Bảng mô tả chi tiết các đối tượng trên giao diện trang quản lý cửa hàng 83

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

Bảng 48-Bảng mô tả chi tiết các đối tượng trên giao diện trang mua gói cửa hang 86

Bảng 49-Bảng mô tả chi tiết các đối tượng trên giao diện trang đổi email 86

Bảng 50-Bảng mô tả chi tiết các đối tượng trên giao diện trang đổi số điện thoại 87

Bảng 51-Bảng mô tả chi tiết các đối tượng trên giao diện trang đổi mật khẩu 88

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

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

 Hiện nay, tại thị trường Việt Nam, có rất nhiều các cửa hàng, tạp hóa nhỏ lẻ với mô hình kinh doanh chủ yếu là offline Với mô hình kinh doanh này, sẽ mang lại rất nhiều trải nghiệm chưa tốt cho cả người mua và người bán như người bán có sản phẩm nhưng người mua có thể không biết, hoặc người mua cần mua gấp sản phẩm nào đó nhưng cửa hàng lại không còn đủ số lượng cung cấp

 Thấy được sự bất cập của mô hình này và các yếu điểm của các cửa hàng khi kinh doanh offline, một website tìm kiếm cửa hàng đang có sẵn sản phẩm là một điều rất cần thiết Và hiện nay, đã có nhiều trang thương mại điện tử xuất hiện như Tiki, Shopee, Lazada, Chợ Tốt hoặc các cửa hàng có thể bán thông qua các kênh mạng xã hội như Facebook, Zalo, … Tuy nhiên, đối với các mô hình này, người mua hàng khó tìm được sản phẩm ở gần mình và các cửa hàng cũng phải chi một khoảng chi phí khá cao để marketing hoặc trả tiền cho phí giao dịch

 Từ đó, nhóm chúng em quyết định thực hiện đề tài này để nghiên cứu và tạo

ra một trang web tìm kiếm sản phẩm trực tuyến để các cửa hàng, tạp hóa nhỏ

lẻ có thể đăng và quản lý các sản phẩm của mình ngay trên hệ thống của website và lan tỏa thương hiệu Đồng thời, cửa hàng có thể liên kết với chính website của mình (nếu có) Đối với khách hàng, họ có thể tìm kiếm nhanh chóng những sản phẩm đang cần gấp thuộc những cửa hàng ở gần mình một cách nhanh chóng, và hiển thị vị trí của những cửa hàng trên bản đồ, khác hàng có thể định vị vị trí hiện tại của mình hoặc có thể chọn ở một vị trí bất

kỳ để thực hiện thao tác tìm kiếm sản phẩm trong khu vực Dựa vào kết quả tìm kiếm được, khách hàng có thể liên hệ trực tiếp đến chủ cửa hàng để tìm hiểu thêm về sản phẩm mà mình đang tìm kiếm

 Cuối cùng, trang web còn có một hệ thống quản lý chuyên nghiệp nhằm kiểm soát thông tin trong toàn bộ quá trình tìm kiếm và truy cập để xem sản phẩm hoặc cửa hàng Bên cạnh đó, hệ thống cũng quản lý chặc chẽ những hành vi

như tạo những tài khoản ảo hoặc tạo quá nhiều cửa hàng, sẽ tránh được nhiều thông tin rác, không thiết thực

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

 Tìm hiểu công nghệ MERN Stack và Google Maps API

 Xây dựng website tìm kiếm cửa hàng từ sản phẩm có các chức năng cơ bản:

o Đăng ký/Đăng nhập/Đăng xuất

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, đổi mật khẩu, lấy lại mật khẩu)

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

o Định vị và chọn vị trí khu vực muốn tìm kiếm sản phẩm

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

o Xem thông tin cửa hàng

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ệ MERN Stack

 Google Maps API

 Thư viện React-bootstrap

 Lĩnh vực mà website phát triển: Tìm kiếm cửa hàng hóa sản phẩm

3.2 Phạm vi nghiên cứu

 Phạm vi nghiên cứu của đề này hướng đến:

o Công cụ tìm kiếm

o Các tính năng của Google Maps

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

 Nghiên cứu được các thành phần chính của công nghệ MERN Stack như: MongoDB, ExpressJS framework, ReactJS library và NodeJS platform Ngoài ra, còn nghiên cứu các chức năng cơ bản của Google Maps API như định vị, tìm kiếm vị trí, chỉ đường, hiển thị marker đánh dấu vị trí cửa hàng

 Sử dụng công nghệ MERN Stack kết hợp với Google Maps API để xây dựng một ứng dụng web tìm kiếm cửa hàng hóa sản phẩm (các cửa hàng đang có sẵn những sản phẩm) có các chức năng dành 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, tìm kiếm cửa hàng có sẵn sản phẩm, định vị và chọn vị trí khu vực muốn tìm kiếm sản phẩm, xem chi tiết sản phẩm, xem thông tin cửa hàng, đánh giá sản phẩm, tạo cửa hàng, thêm sản phẩm vào cừa hàng, cập nhật sản phẩm, quản lý cửa hàng, nhắn tin giữa Admin và Chủ cửa hàng, thống kế

 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ý cửa hàng, 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 MERN STACK

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ôn ngữ 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ổ sung thê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ặc thự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 European association 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êu chuẩ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êu chuẩ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 standard language) để phát triển các implementation của JavaScript riêng cho họ Tiêu chuẩn ECMAScript 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 JavaScript cũng như sự khác nhau của phiên bản tiêu chuẩn ECMAScript (ECMAScript specification editions)

 Tiêu chuẩn ECMA-262 cũng đã được phê duyệt bởi ISO (International Organization for Standardization) tại ISO-16262 Bạn cũng có thể tìm tiêu chuẩn trên the 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 Web Consortium (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ài viết tổng quan về công nghệ JavaScript [1]

1.2 Tìm hiểu NodeJS

1.2.1 Khái niệm NodeJS

 Node.js là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng mạng Node.js sử dụng Google V8 JavaScript engine để thực thi mã,

và một tỷ lệ lớn các mô-đun cơ bản được viết bằng JavaScript

 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 trong Node.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ộng nhanh, 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 hayTwitter)

 Ứ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

 Ưu điểm

 Đặ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ất khi 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ủa server 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àm bằ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

nhanh Các ứng dụng bạn định viết không muốn nó tải lại trang, gồm rấ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 HTTP request 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ực lớ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 đa hoạ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, …

 Nhược điểm

 Ứ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ài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tươ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ập trì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!

1.2.4 Những trường hợp nên sử dụng NodeJS

 Không nên dùng NodeJS khi:

- Xây dựng các ứng dụng hao tốn tài nguyên: Bạn đừng mơ mộng đến Node.js khi bạn đang muốn viết một chương trình convert video

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

- Một ứng dụng chỉ toàn CRUD: Node.js không nhanh hơn PHP khi bạn là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ác webserver 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át triể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ểm nà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ệc khô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ông biế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ớn mạnh, và sẽ ít có sự support từ cộng đồng Khi mà phần lớn cộng đồng cũng không khá 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ần như không có ngôn ngữ nào xử lý JSON dễ dàng hơn Javascript, chưa

kể các API server thường không phải thực hiện những xử lý nặng nề nhưng lượng concurrent request thì rất cao Mà Node.js thì xử lý non-blocking Chẳng còn gì thích hợp hơn Node.js trong trường hợ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ải chỉ

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 giao thứ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 process giú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 đầu như trước đây, và bạn có thể lưu cũng như chia sẻ trạng thái của một client với các client khác ngay trong ngôn ngữ, chứ bạn không cần thô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ưa biế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ố giao thứ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òn nhiề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ời gian đá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ên nề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 mobile

 Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên các bạn không phải lo lắng khi làm việc với Framework này

 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]

1.4 Tìm hiểu MongoDB

 Định nghĩa MongoDB

 MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL(*)

hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++

 Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng

 NoSQL là 1 dạng CSDL mã nguồn mở không sử dụng Transact-SQL để truy vấn thông tin NoSQL viết tắt bởi: None-Relational SQL, hay có nơi thường gọi là Not-Only SQL CSDL này được phát triển trên Javascript Framework với kiểu dữ liệu JSON (Cú pháp của JSON là “key:value”) NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ RDBMS về tốc độ, tính năng, khả năng mở rộng, memory cache

 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 RDMS chú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ại JSON đ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ủa cá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ặc thiế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ột cá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ác documents 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

Database Database Table Collection Tuple/Row Document Column Field Table Join Embedded Documents Primary Key Primary Key (mặc định là _id)

Bảng 1-Bảng so sánh giữa RDBMS 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 động

- Min/ Max keys: Kiểu dữ liệu này được sử dụng để so sánh một giá trị với các phần tử BSON thấp nhất và cao nhất

- Mảng: Kiểu dữ liệu này được sử dụng để lưu giữ các mảng hoặc danh sách hoặc nhiều giá trị vào trong một key

- Timestamp: Đánh dấu thời điểm một Document được sửa đổi hoặc được thêm vào

- Object: Kiểu dữ liệu này được sử dụng cho các Document được nhúng vào

- 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 ReactJS

1.5.1 Giới thiệu ReactJS

 ReactJS là một thư viện JavaScript dùng trong việc xây dựng giao diện người dùng và được phát triển bởi đội ngũ Facebook Tới nay, ReactJS

đã thu hút hàng triệu lập trình viên trên thế giới ReactJS thường được dùng bởi Frontend Developer trong thiết kế Web Application một cách nhanh chóng hơn

 Một trong những điểm mạnh của React JS là virtual DOM - thứ nằm ẩn bên trong mỗi view và là lí do khiến cho React đạt được hiệu năng tốt Khi một view yêu cầu gọi, tất cả mọi thứ sẽ được đưa vào trong một bản sao ảo của DOM Sau khi việc gọi hoàn thành, React tiến hành một phép

so sánh giữa DOM ảo và DOM thật, và thực hiện những thay đổi được chỉ ra trong phép so sánh trên

1.5.2 Các khái niệm cơ bản trong ReactJS

 Virtual-DOM: một object Javascript, mỗi object chứa đầy đủ thông tin

cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật (quá tuyệt!) Ta có thể hiểu nó như một Model ảo xử lý dữ

liệu của client

 Component:

 React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Bạn có thể tạo ra một component bằng các gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư viện này

 Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác

 ReacJS tạo ra thẻ HTML không như chúng ta viết bình thường mà dùng Component để gói các thẻ HTML thành các object phân tầng để render

 Trong các Component của React thì hàm render là quan trọng nhất Nó chính là hàm xử lý việc tạo thẻ HTML cũng như là một minh chứng

cho khả năng xử lý qua Virtual-DOM Mọi thay đổi của dữ liệu ở bất

cứ thời điểm nào đều cũng sẽ được Virtual-DOM xử lý và update ngay tức thì

 Props và State:

 State: data private bị kiểm soát bởi Component

 Props: thì không bị kiểm soát bởi Component

1.5.3 Ưu và nhược điểm của ReactJS

 Ưu điểm

- Cập nhật những thay đổi dữ liệu nhanh

- React không phải là framework nên nó giảm tải các ràng buộc của các thư viện với nhau

- Dễ tiếp cận với những người có kiến thức về JS

- Khó tiếp cận cho người mới học về Web [6]

2 ỨNG DỤNG MERN STACK TRONG PHÁT TRIỂN WEBSITE

2.1 Khái niệm về công nghệ Stack

 Technical stack là sự kết hợp các công nghệ/framework/ngôn ngữ lập trình, v.v để tạo nên một phần mềm hoàn chỉnh

 Với các phần mềm hiện giờ thường có 2 phần là: clientside và serverside hay người ta còn gọi là frontend và backend Nên người ta cũng phân ra backend stack, frontend stack nữa Ta thường dùng chữ cái đầu để đặt tên cho technical stack như: LAMP (Linux, Apache, MySQL, PHP), MEAN (MongoDB, Express, Angular, NodeJS)

2.2 Khái niệm MERN Stack

 MERN stack là nguyên bộ combo open source các công nghệ đều liên quan đến Javascript là cũng hot nhất hiện nay: MongoDB, ExpressJS, React/React

Native, NodeJS Người ta dùng MERN stack để xây dựng React Universal App [7]

2.3 Những điểm nổi bật trong MERN Stack

 Hot Reloading cho các React Components

 Các đoạn mã được phân chia bởi React Router

 Hỗ trợ đa ngôn ngữ

 Hỗ trợ generate code

 Cấu trúc kiểu mô-đun

 Ava Test Runner

 Hỗ trợ Docker

 Có thể tùy biến phiên bản MERN cho riêng người sử dụng [8]

3 TÌM HIỂU GOOGLE MAPS API

3.1 Giới thiệu Google Maps API

 Là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ của website

A (gọi là Map API) và nhúng vào website của mình (site B) Site A ở đây là google map, site B là các website cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google (di chuột, room, đánh dấu trên bản đồ, …)

 Các ứng dụng xây dựng trên maps được nhúng vào trang web cá nhân thông qua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng

 Google Maps API đã được nâng cấp lên phiên bản v3 không chỉ hỗ trợ cho các máy để bàn truyền thống mà cho cả các thiết bị di động; các ứng dụng nhanh hơn và nhiều hơn

 Các dịch vụ hoàn toàn miễn phí với việc xây dựng một ứng dụng nhỏ Trả phí nếu đó là việc sử dụng cho mục đích kinh doanh, doanh nghiệp

3.2 Một số ứng dụng của Google Maps API

 Đánh dấu các địa điểm trên bản đồ kèm theo thông tin cho địa điểm đó: khu vui chơi giải trí, nhà hàng khách sạn, cây ATM, bệnh viện, trường học, … bất

 Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm…

 Tình trạng giao thông các khu vực, … từ đó đưa ra các giải pháp [9]

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

4.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ảo trì

 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 nó sẽ lấy yêu cầu của người dùng Sau đó sẽ gửi yêu cầu đó đến model Model sẽ tương tác với database nếu có (đa số sẽ truy xuất dữ liệu từ database), sau đó lấy đúng dữ liệu yêu cầu và gữi trả lại cho controller Controller xử lý nghiệp vụ, logic business và gữi trả lại cho view View thực hiện nhiệm vụ hiển thị dữ liệu đúng kết quả cho người dùng yêu cầu

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

4.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ành phầ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:

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

4.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 trang web động Các views sẽ được Controller điều hướng đến và chúng chỉ biết đến sự tồn tại của java bean

4.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ý logic nghiệ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

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

4.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àm củ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

4.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ưng MVC 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àm cho 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 cho việ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ận dụ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ụng active record để viết ứng dụng Chúng luôn cần người viết phải nắm vứng

mô hình mảng đa chiều. [10]

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 Google Maps (https://www.google.com/maps)

Hình 3-Trang tìm kiếm google.com/maps

 Các chức năng chính

 Tìm kiếm (vị trí, địa điểm cửa hàng, sản phẩm)

 Đăng ký, Đăng nhập (thuộc hệ sinh thái Google)

 Lưu lịch sử tìm kiếm

 Ưu điểm

 Tốc độ tìm kiếm nhanh và hiệu quả

 Có thể tìm kiếm theo thể loại như: cửa hàng tạp hoác, quán cà phê, …

 Hỗ trợ giao diện bản đồ, giúp người dùng thấy được kết quả trực quan Ngoài ra, còn có chức năng chỉ đường

 Nhược điểm

 Chưa xử lý được kết quả trả về chính xác đúng theo loại sản phẩm, cửa hàng mà người dùng cần tìm kiếm

 Đánh giá sản phẩm sau khi mua hàng thành công

 Ưu điểm

 Đăng nhập lần đầu trên mỗi thiết bị sẽ bắt buộc nhập mã OTP thông qua

số điện thoại, giúp tài khoản được an toàn hơn

 Tốc độ tìm kiếm nhanh và hiệu quả

 Hiển thị gợi ý sản phẩm giúp tìm kiếm nhanh hơn, hiệu quả hơn

 Có thể lọc sản phẩm theo danh mục, vị trí muốn mua, đơn vị vận chuyển, loại shop, đánh giá, những sản phẩm trong tầm giá, …

 Có thể liên hệ với cửa hàng thông qua tin nhắn

 Nhược điểm

 Mỗi lần đăng nhập lần đầu trên thiết bị mới cần phải nhập mã OTP, đôi khi gửi mã khá lâu và không có cách nào đăng nhập được trong trường hợp số điện thoại trong trạng thái không sử dụng

 Không biết được chính xác vị trí của cửa hàng nếu muốn mua hàng gấp  chưa hỗ trợ cho việc mua hàng nhanh mà không cần đến đơn vị vận

chuyển

1.3 Tiki (https://tiki.vn)

Hình 5-Trang tìm kiếm tiki.vn

 Hiển thị gợi ý sản phẩm giúp tìm kiếm nhanh hơn, hiệu quả hơn

 Tìm kiếm sản phẩm theo danh mục

 Tìm kiếm sản phẩm trong tầm giá

 Hỗ trợ lưu lịch sử tìm kiếm giúp tìm kiếm lại dễ dàng hơn

 Nhược điểm

 Hiển thị quá nhiều chi tiết nên giao diện trang chủ nên khó nhìn

 Đánh giá sản phẩm khi chưa mua sản phẩm khiến nội dung đánh giá thiếu khách quan và tính chính xác chưa cao

 Kết quả trả về đơn thuần là cửa hàng có sản phẩm muốn tìm kiếm, chưa

có đánh dấu vị trí của cửa hàng để người dùng biết chính xác để đến cửa hàng mua ngay trong trường hợp cần gấp

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

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

 Đối với người dùng khách

 Xem trang chủ

 Tìm kiếm sản phẩm

 Lọc sản phẩm theo các tiêu chí (Giá, Bán kính)

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

 Xem chi tiết cửa hàng

 Đăng ký

 Đối với người dùng thành viên

 Xem trang chủ

 Tìm kiếm sản phẩm

 Lọc sản phẩm theo các tiêu chí (Giá, Bán kính)

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

 Xem chi tiết cửa hàng

 Đăng nhập

 Quên mật khẩu

 Quản lý thông tin cá nhân

 Quản lý cửa hàng

 Thêm, xóa, sửa cửa hàng

 Thêm, xóa, sửa sản phẩm

 Báo cáo thống kê

 Đối với quản trị viên website

 Đăng nhập

 Quên mật khẩu