1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API

68 550 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 68
Dung lượng 12,79 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

MỤC LỤC DANH MỤC BẢNG DANH MỤC HÌNH ẢNH LỜI MỞ ĐẦU 1 1. Lý do chọn đề tài 1 2. Nội dung chính của đề tài 1 3. Đối tượng và phạm vi nghiên cứu đồ án 2 4. Phương pháp nghiên cứu 2 5. Ý nghĩa của đề tài 2 6. Cấu trúc đồ án 2 CHƯƠNG 1: GIỚI THIỆU 3 1.1. Công nghệ Google Map API 3 1.1.1. Google Map API là gì 3 1.1.2. Một số ứng dụng của Google Map API 3 1.1.3. Tạo một Google Map đơn giản 4 1.2. Công nghệ ASP.Net MVC 6 1.2.1. Tổng quan về ASP.NET MVC 1 6 1.2.2. Lịch sử phát triển của ASP.NET MVC 2 8 1.2.3. Lựa chọn áp dụng MVC trong xây dựng ứng dụng 3 9 1.2.4. Các tính năng của nền tảng ASP.NET MVC 1 10 1.2.5. Tạo ứng dụng ASP.Net MVC trong Visual Studio 2015 2 11 1.3. Đặc điểm chung của vườn quốc gia Thế nào là vườn quốc gia, tình trạng vườn quốc gia ở Việt Nam 15 1.3.1. Vườn quốc gia là gì? 4 15 1.3.2. Tình trạng vườn quốc gia Việt Nam nói chung. 15 1.3.3. Tình trạng của vườn quốc gia Xuân Sơn: 16 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ XÂY DỰNG CƠ SỞ DỮ LIỆU 18 2.1. Phân tích thiết kế hệ thống 18 Bảng 2.1: Các Actor của bài toán 18 2.1.1. Biểu đồ UseCase tổng quát 19 2.1.3. Phân rã các chức năng hệ thống của người dùng. 27 2.1.4. Sơ đồ lớp 31 2.1.5. Sơ đồ tuần tự 35 2.1.6. Sơ đồ hoạt động 37 2.2. Thiết lập CSDL thuộc tính 40 2.2.1. CSDL thuộc tính được thiết lập bằng công cụ SQL Server, gồm 5 bảng như sau: 40 2.2.2. Bảng liên kết CSDL 42 CHƯƠNG 3: XÂY DỰNG CÁC CHỨC NĂNG CỦA CHƯƠNG TRÌNH 43 3.1. Thử nghiệm: 44 3.1.1. Xây dựng chức năng quản lý cây gỗ quý cho người quản lý 44 3.1.2. Xây dựng chức xem thông tin cây gỗ quý cho người sử dụng 54 KẾT LUẬN VÀ KIẾN NGHỊ 57 TÀI LIỆU THAM KHẢO 58

Trang 1

Em xin cam đoan rằng đồ án tốt nghiệp này do chính em thực hiện, không saochép từ công trình nghiên cứu nào khác, tàiliệu sử dụng trong đồ án tốt nghiệp nàyđều được ghi rõ nguồn gốc.

Sinh viên

Phan Nhật Nguyệt

Trang 2

Sau quá trình tìm hiểu đề tài “Xây dựng ứng dụng trực tuyến theo dõi và quản

lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API”, em đã hoàn thành tiến độ như 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

Để có thể hoàn thành khóa luận tốt nghiệp này em xin gửi lời cảm ơn chân thành

nhất tới TS Lê Phú Hưng – Phó Trưởng khoa Công Nghệ Thông Tin Thầy đã tận

tình hướng dẫn, quan tâm, chỉ bảo, tạo mọi điều kiện giúp đỡ em trong suốt quátrình thực hiện đồ án tốt nghiệp Đồng thời, 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ìnhgiả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ậptại trường Em xin cảm ơn các anh/chị thuộc Công ty cổ phần phần mềm FPT soft

đã hỗ trợ cho em về mặt thời gian lần kiến thức để em có thể hoàn thành đồ án tốtnghiệp

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!

Trang 3

DANH MỤC HÌNH ẢNH

LỜI MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Nội dung chính của đề tài 1

3 Đối tượng và phạm vi nghiên cứu đồ án 2

4 Phương pháp nghiên cứu 2

5 Ý nghĩa của đề tài 2

6 Cấu trúc đồ án 2

CHƯƠNG 1: GIỚI THIỆU 3

1.1 Công nghệ Google Map API 3

1.1.1 Google Map API là gì 3

1.1.2 Một số ứng dụng của Google Map API 3

1.1.3 Tạo một Google Map đơn giản 4

1.2 Công nghệ ASP.Net MVC 6

1.2.1 Tổng quan về ASP.NET MVC [1] 6

1.2.2 Lịch sử phát triển của ASP.NET MVC [2] 8

1.2.3 Lựa chọn áp dụng MVC trong xây dựng ứng dụng [3] 9

1.2.4 Các tính năng của nền tảng ASP.NET MVC [1] 10

1.2.5 Tạo ứng dụng ASP.Net MVC trong Visual Studio 2015 [2] 11

1.3 Đặc điểm chung của vườn quốc gia - Thế nào là vườn quốc gia, tình trạng vườn quốc gia ở Việt Nam 15

1.3.1 Vườn quốc gia là gì? [4] 15

1.3.2 Tình trạng vườn quốc gia Việt Nam nói chung 15

1.3.3 Tình trạng của vườn quốc gia Xuân Sơn: 16

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ XÂY DỰNG CƠ SỞ DỮ LIỆU 18

2.1 Phân tích thiết kế hệ thống 18

Bảng 2.1: Các Actor của bài toán 18

Trang 4

2.1.4 Sơ đồ lớp 31

2.1.5 Sơ đồ tuần tự 35

2.1.6 Sơ đồ hoạt động 37

2.2 Thiết lập CSDL thuộc tính 40

2.2.1 CSDL thuộc tính được thiết lập bằng công cụ SQL Server, gồm 5 bảng như sau: 40

2.2.2 Bảng liên kết CSDL 42

CHƯƠNG 3: XÂY DỰNG CÁC CHỨC NĂNG CỦA CHƯƠNG TRÌNH 43

3.1 Thử nghiệm: 44

3.1.1 Xây dựng chức năng quản lý cây gỗ quý cho người quản lý 44

3.1.2 Xây dựng chức xem thông tin cây gỗ quý cho người sử dụng 54

KẾT LUẬN VÀ KIẾN NGHỊ 57

TÀI LIỆU THAM KHẢO 58

Trang 5

Chữ viết tắt Tên tiếng Anh Tên Tiếng Việt

API Application Programming

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

SQL Structured Querry Language Ngôn ngữ truy vấn có cấu trúc

Trang 6

Bảng 2.1: Các Actor của bài toán 18

Bảng 2.1: Cơ sở dữ liệu LocalMap 40

Bảng 2.2: Cơ sở dữ liệu ClasscifyTree 40

Bảng 2.3: Cơ sở dữ liệu Marker 41

Bảng 2.4: Cơ sở dữ liệu hình ảnh 41

Bảng 2.5: Cơ sở dữ liệu người dùng 42

Trang 7

Hình 1.2: Bản đồ vườn quốc gia Xuân Sơn 6

Hình 1.3: Mẫu Model – View – Controller 7

Hình 1.4: Tạo Project mới cho ứng dụng ASP.Net 11

Bước 2: Chọn cấu hình ứng dụng ASP.Net MVC, chọn Empty cho ứng dụng đầu này 11

Hình 1.5: Cấu hình cho ứng dụng 11

Hình 1.6: Tạo project thành công 12

Hình 1.7: Lỗi khi chạy ứng dụng rỗng 12

Hình 1.8: Tạo control mới để thực hiện chương trình 13

Hình 1.10: Tạo mới view 14

Hình 1.11: Xem và chỉnh sửa nội dung của View 14

Hình 1.12: Vườn quốc gia Xuân Sơn - Phú Thọ 17

Hình 1.13: Ươm giống cây quý hiếm ở VQG Xuân Sơn 17

Hình 2.1: Biểu đồ UseCase tổng quát 19

Hình 2.2 : Đăng nhập hệ thống 21

Hình 2.3 : Cập nhật thêm mới cây 22

Hình 2.4 : Chỉnh sửa thông tin cây gỗ quý 23

Hình 2.5 : Khoanh vùng cây gỗ quý 24

Hình 2.6: Tìm kiếm thông tin 25

Hình 2.7 : Thống kê số lượng cây gỗ quý 26

Hình 2.8 : Thêm mới khu vực quản lý 27

Hình 2.9: Đăng nhập hệ thống 28

Hình 2.10: Khoanh vùng cây gỗ quý 29

Hình 2.11: Tìm kiếm thông tin 30

Hình 2.12 : Thống kê số lượng cây gỗ quý 31

Hình 2.13: Biểu đồ lớp tổng quát 32

Hình 2.14: Lớp ClasscifyTree 32

Hình 2.15: Lớp LocalMap 33

Trang 8

Hình 2.18: Lớp User 34

Hình 2.19: Biểu đồ tuần tự chức năng đăng nhập hệ thống 35

Hình 2.20: Biểu đồ tuần tự cho chức năng tìm kiếm thông tin 35

Hình 2.21: Biểu đồ tuần tự cho chức năng chỉnh sửa 36

Hình 2.22: Biểu đồ tuần tự cho chức năng xóa 36

Hình 2.23 Biểu đồ tuần tự chức năng thêm bản đồ mới 37

Hình 2.24: Biểu đồ hoạt động chức năng đăng nhập 37

Hình 2.25: Biểu đồ hoạt động chức năng thêm cây mới 38

Hình 2.26: Biểu đồ hoạt động chức năng chỉnh sửa thông tin cây 38

Hình 2.27: Biểu đồ hoạt động chức năng tìm kiếm cây gỗ 39

Hình 2.28: Biểu đồ hoạt động chức năng thêm một map mới 39

Hình 2.29: Sơ đồ liên kết cơ sở dữ liệu 42

Hình 3.1: Chức năng đăng nhập tài khoản 44

Hình 3.2 : Bản đồ vườn quốc gia Xuân Sơn 45

Hình 3.3 Bản đồ cây gỗ quý VQG Xuân Sơn 45

Hình 3.4: Thêm mới khu vực bản đồ 46

Hình 3.5 : Hình ảnh và mô tả thông tin cây gỗ quý 47

Hình 3.6 : Hủy bỏ cập nhật thêm mới cây gỗ quý 47

Hình 3.7: Thêm cây mới, hiển thị cây lên bản đồ vào vị trí được chọn 48

Hình 3.8: Bản đồ vị trí cây gỗ quý hiếm thêm mới thành công và bản địa ở vườn quốc gia Xuân Sơn 48

Hình 3.9: Tùy chọn chỉnh sửa thông tin cây 49

Hình 3.10: Vị trí của cây trên bản đồ 50

Hình 3.11: Xem chi tiết thông tin cây 50

Hình 3.12: Chức năng xóa thông tin cây gỗ 51

Hình 3.13: Marker 51

Hình 3.14: Thao tác khoanh vùng cây 52

Trang 9

Hình 3.17: Thêm mới khu vực bản đồ 53

Hình 3.18: Xóa khu vực quản lý 54

Hình 3.19 : Chức năng khoanh vùng và thống kê của người sử dụng 54

Hình 3.20: Chức năng xem chi tiết cây của người dùng 55

Hình 3.21: Danh sánh bản đồ khu vực 55

Hình 3.22: Giao diện người dùng vườn quốc gia Xuân Sơn 56

Trang 10

LỜI MỞ ĐẦU 1.Lý do chọn đề tài

Trong tình hình hiện nay cùng với xu hướng phát triển của công nghiệp hóa hiệnđại hóa đã và đang có nhiều các ứng dụng tiên tiến ra đời nhằm tiết kiệm tối đa chiphí, thời gian và sức lực con người mà vẫn có thể quản lý tốt Một trong những lĩnhvực mang tầm quan trọng em muốn đề cập đến là việc bảo vệ và quản lý tài nguyênthiên nhiên, các loại cây gỗ quý hiếm cần được bảo tồn ở Việt Nam nói riêng, thếgiới nói chung Trong rừng vì địa lý hiểm trở nên việc xác định vị trí và quản lý cácloại cây gỗ quý là rất khó khăn, phức tạp cho những người quản lý Em muốn xâydựng một ứng dụng tự động hóa có thể thêm, sửa, xóa, thống kê và cập nhật đượctình trạng các loại cây gỗ quý Qua đó chúng ta có thể xác định được vị trí của cây,xem các thông tin mô tả, số lượng về loại cây đó Ứng dụng giúp người dùng chủđộng trong việc quản lý

Hiện nay, lĩnh vực nào cũng có xu hướng phát triển mạnh, thế nhưng vấn đề tàinguyên thiên nhiên và đặc biệt là tài nguyên quý hiếm cần được bảo vệ cấp bách vàcần thiết Chính vì mức độ quan trọng và mong muốn xây dựng nên một ứng dụng

để người dùng có thể quản lý một các dễ dạng và tự động nên em đã lựa chọn đề tài

“Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API”

làm đề tài đồ án tốt nghiệp của mình

2 Nội dung chính của đề tài

Mục đích chính của đề tài là xây dựng thành công ứng dụng phục vụ công tácquản lý trực tuyến theo dõi và quản lý cây gỗ quý với các chức năng:

- Cung cấp thông tin về tài nguyên rừng, đặc biệt là thông tin về cây gỗ quý

- Thêm, sửa, xóa thông tin các cây gỗ trên địa bàn nhất định

- Tìm kiếm theo vùng và đường theo loại cây

- Thống kê

- Thêm mới 1 khu vực quản lý

Trang 11

3 Đối tượng và phạm vi nghiên cứu đồ án

Đối tượng và phạm vi nghiên cứu là các cây gỗ quý tại VQG Xuân Sơn tỉnh PhúThọ Điều tra, quản lý và thống kê cây gỗ quý hiếm ở VQG Xây dựng cơ sở dữ liệuđối với cây điều tra và quản lý dữ liệu bằng phần mềm Xây dựng tài liệu hướngdẫn kỹ thuật quản lý cá thể cây tự nhiên trong VQG Xuân Sơn, Phú Thọ

4 Phương pháp nghiên cứu

Thu thập các tài liệu, thông tin liên quan đến các chủng loại cây gỗ quý ở vườnquốc gia Xuân Sơn

Thiết lập cơ sở dữ liệu thuộc tính bằng công cụ SQL Server với những tài liệu,thông tin thu thập được ở trên

Sử dụng Google Map API và ngôn ngữ JavaScript để xây dựng ứng dụng quản lýcây gỗ

5 Ý nghĩa của đề tài

Xây dựng thành công ứng dụng trực tuyến có khả năng cập nhật, theo dõi, tìmkiếm, thống kê các cây gỗ quý trên các địa bản nhất định

Xây dựng ứng dụng với giao diện và cách sử dụng dễ dàng, các chức năng hoạtđộng ổn định

6 Cấu trúc đồ án

Đồ án gồm 3 chương:

Chương 1: Giới thiệu

Chương 2: Phân tích thiết kế hệ thống và xây dựng cơ sở dữ liệu

Chương 3: Xây dựng các chức năng của chương trình

Trang 12

CHƯƠNG 1: GIỚI THIỆU1.1 Công nghệ Google Map API

1.1.1 Google Map API là gì

Google Map là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên webmiễn phí được cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google nổi bật

là dẫn đường Cho phép thấy bản đồ đường sá, đường đi cho xe đạp, cho người đi

bộ và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trênthế giới

 Map API là gì?

- Đó là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ củasite 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 web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ củagoogle, có thể rê 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ôngqua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng

- Google Map API đã được nâng cấp Phiên bản này hỗ trợ không chỉ cho cácmáy để bàn truyền thống mà cho cả các thiết bị di động Nhanh hơn và nhiều hơncác ứng dụng

- Điều quan trọng là 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, doanhnghiệp

1.1.2 Một số ứng dụng của Google Map API

- Đánh dấu các địa điểm trên bản đồ cùng các thông tin cho địa điểm: các khu vuichơi giải trí, nhà hàng khách sạn, các quán ăn ngon, các shop quần áo, nữ trang

- Chỉ dẫn đường đến các địa điểm cần tìm,chỉ dẫn đường giao thông công cộng

Ở đây sử dụng các service google cung cấp

- 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 và đưa ra các giải pháp có thể

Trang 13

1.1.3 Tạo một Google Map đơn giản

Ví dụ

- Tạo 1 API key

Truy cập vào: https://developers.google.com/maps/documentation/javascript/get-

- Click GET A KEY-> Chọn Project -> API Sau đó một API key sẽ hiện lên và bạn sẽ copy lại để sử dụng

Hình 1.1: Một API Key đã được tạo

- Hiển thị bản đồ

+ Lấy kinh độ, vĩ độ để hiển thị bản đồ

Truy cập vào http://www.latlong.net/ và nhập địa điểm cần tìm.

+ Các loại bản đồ:

ROADMAP (normal, default 2D map)

SATELLITE (photographic map)

HYBRID (photographic map + roads and city names)

TERRAIN (map with mountains, rivers, etc.)

Trang 14

//Truyen cac thuoc tinh Map cho div chua map

var map = new

google.maps.Map(document.getElementByID(“googleMap”),mapProp); }

//load ban do khi load trang

google.maps.event.addDomListener(window,’load’initialize);

</script>

</head>

<body>

Trang 15

//Khai bao the div chua map

<div id=”googleMap” style = “width:500px; height:380px;”>< /div>

- Nền tảng ASP.NET MVC giúp cho chúng ta có thể tạo được các ứng dụng web

áp dụng mô hình MVC thay vì tạo ứng dụng theo mẫu ASP.NET Web Form

- Nền tảng ASP.NET MVC có đặc điểm nổi bật là nhẹ (lighweigt), dễ kiểm thửphần giao diện (so với ứng dụng Web Forms), tích hợp các tính năng có sẵn củaASP.NET

- Nền tảng ASP.NET MVC được định nghĩa trong namespace System.Web.Mvc

và là một phần của name space System.Web

MVC là một mẫu thiết kế (design pattern) Một số loại ứng dụng web sẽ thíchhợp với kiến trúc MVC Một số khác vẫn thích hợp với ASP.NET Web Forms và cơchế postbacks Đôi khi có những ứng dụng kết hợp cả hai kiến trúc trên

Mẫu kiến trúc Model – View – Controller có ba thành phần chính: model, view

và controller

Trang 16

Nền tảng MVC bao gồm các thành phần dưới đây:

Hình 1.3: Mẫu Model – View – Controller

Models: Các đối tượng Models là một phần của ứng dụng, các đối tượng này

thiết lập logic của phần dữ liệu của ứng dụng Thông thường, các đối tượng modellấy và lưu trạng thái của model trong CSDL Ví dụ như, một đối tượng Product (sảnphẩm) sẽ lấy dữ liệu từ CSDL, thao tác trên dữ liệu và sẽ cập nhật dữ liệu trở lại vàobảng Products ở SQL Server

Views: Views là các thành phần dùng để hiển thị giao diện người dùng (UI).

Thông thường, view được tạo dựa vào thông tin dữ liệu model Ví dụ như, viewdùng để cập nhật bảng Products sẽ hiển thị các hộp văn bản, drop-down list, và cáccheck box dựa trên trạng thái hiện tại của một đối tượng Product

Controllers: Controller là các thành phần dùng để quản lý tương tác người dùng,

làm việc với model và chọn view để hiển thị giao diện người dùng Trong một ứngdụng MVC, view chỉ được dùng để hiển thị thông tin, controller chịu trách nhiệmquản lý và đáp trả nội dung người dùng nhập và tương tác với người dùng

Để quản lý sự phức tạp của ứng dụng, mẫu MVC giúp cho chúng ta có thể kiểmthử ứng dụng dễ dàng hơn hẳn so với khi áp dụng mẫu Web Forms

Hơn thế nữa, việc kiểm thử trên nền tảng Web Forms yêu cầu phải sử dụng đếnweb server Nền tảng MVC phân tách các thành phần và sử dụng các interface(kháiniệm giao diện trong lập trình hướng đối tượng), và nhờ đó có thể kiểm thử cácthành phần riêng biệt trong tình trạng phân lập với các yếu tố còn lại của ứng dụng

Trang 17

Sự phân tách rạch ròi ba thành phần của ứng dụng MVC còn giúp cho việc lậptrình diễn ra song song Ví dụ như một lập trình viên làm việc với view, lập trìnhviên thứ hai lo cài đặt logic của controller và lập trình viên thứ ba có thể tập trungvào logic tác vụ của model tại cùng một thời điểm.

1.2.2 Lịch sử phát triển của ASP.NET MVC [2]

- Asp.Net 1.0 : Phiên bản đầu tiên được phát hành vào tháng 3 năm 2009 trên nềntảng bộ Net Framework 3.5 bộ Visual Studio 2008

- Asp.Net 2.0 : Phiên bản này được phát hành vào tháng 3 năm 2010 trên bộ NetFramework 3.5 và Net Framework 4.0 bộ Visual Studio 2010

- Asp.Net MVC 3 : Phiên bản này được phát hành vào tháng 1 năm 2011 trên nềntảng bộ Net Framework 4.0, các đặc điểm chính của phiên bản này

- Asp.Net 4.0 : Phiên bản này được phát hành vào tháng 8 năm 2012 trên nềntảng bộ Net Framework 4.0 và Net Framework 4.5 trên phiên bản Visual Studio

2010 SP1 and Visual Studio 2012

- Asp.Net MVC 5 : Phiên bản này được phát hành vào tháng 10 năm 2013 trênnền tảng bộ Net Framework 4.5 và Net Framework 4.5.1 trên phiên bản VisualStudio 2013 Các đặc điểm chính của phiên bản này như sau :

- Với MVC5 thì cải tiến hơn so với ASP.NET MVC4, Bootstrap được thay thế mẫu MVC mặc định

Chứng thực người dùng Authentication Filter được tuỳ chỉnh hoặc chứng thực từ hãng thứ 3 cung cấp;

Với Filter overrides, chúng ta có thể Filter override trên Method hoặc Controller; thuộc tính Routing được tích hợp vào MVC5;

Trang 18

1.2.3.Lựa chọn áp dụng MVC trong xây dựng ứng dụng

Bạn cần phải xem xét kỹ càng việc áp dụng mô hình ASP.NET MVC hay mô hình ASP.NET Web Forms khi xây dựng một ứng dụng Mô hình MVC không phải

là mô hình thay thế cho Web Forms, bạn có thể dùng một trong hai mô hình

Trước khi quyết định sử dụng MVC hay Web Forms cho một web site cụ thể,bạn cần phải phân tích lợi ích khi chọn một trong hai hướng

- Lợi ích của ứng dụng web dựa trên mô hình MVC

Nền tảng ASP.NET MVC mang lại những lợi ích sau:

+ Dễ dàng quản lý sự phức tạp của ứng dụng bằng cách chia ứng dụng thành

ba thành phần model, view, controller

+ Nó không sử dụng view state hoặc server-based form Điều này tốt chonhững lập trình viên muốn quản lý hết các khía cạnh của một ứng dụng

+ Nó sử dụng mẫu Front Controller, mẫu này giúp quản lý các requests (yêucầu) chỉ thông qua một Controller Nhờ đó bạn có thể thiết kế một hạ tầng quản lýđịnh tuyến Để có nhiều thông tin hơn, bạn nên xem phần Front Controller trên website MSDN

+ Hỗ trợ tốt hơn cho mô hình phát triển ứng dụng hướng kiểm thử (TDD)+ Nó hỗ trợ tốt cho các ứng dụng được xây dựng bởi những đội có nhiều lậptrình viên và thiết kế mà vẫn quản lý được tính năng của ứng dụng

- Lợi ích của ứng dụng được xây dựng trên nền tảng Web Forms

+ Nó hỗ trợ cách lập trình hướng sự kiện, quản lý trạng thái trên giao thứcHTTP, tiện dụng cho việc phát triển các ứng dụng Web phục vụ kinh doanh Cácứng dụng trên nền tảng Web Forms cung cấp hàng tá các sự kiện được hỗ trợ bởihàng trăm các server controls

+ Sử dụng mẫu Page Controller Xem thêm ở mục Page Controller trênMSDN

+ Mô hình này sử dụng view state hoặc server-based form, nhờ đó sẽ giúp choviệc quản lý trạng thái các trang web dễ dàng

Trang 19

Nói tóm lại, áp dụng Web Forms giúp giảm bớt sự phức tạp trong xây dựng ứngdụng, bởi vì các thành phần (lớp Page, controls,…) được tích hợp chặc chẽ vàthường thì giúp bạn viết ít code hơn là áp dụng theo mô hình MVC.

1.2.4 Các tính năng của nền tảng ASP.NET MVC [1]

+ Tách bạch các tác vụ của ứng dụng (logic nhập liệu, business logic, và logicgiao diện), dễ dàng kiểm thử và mặc định áp dụng hướng phát triển TDD Tất cả cáctính năng chính của mô hình MVC được cài đặt dựa trên interface và được kiểm thửbằng cách sử dụng các đối tượng mocks, mock object là các đối tượng mô phỏngcác tính năng của những đối tượng thực sự trong ứng dụng

+ MVC là một nền tảng khả mở rộng (extensible) & khả nhúng (pluggable) Cácthành phần của ASP.NET MVC được thiết kể để chúng có thể được thay thế mộtcách dễ dàng hoặc dễ dàng tùy chỉnh Bạn có thể nhúng thêm view engine, cơ chếđịnh tuyến cho URL, cách kết xuất tham số của action-method và các thành phầnkhác

+ ASP.NET MVC có thành phần ánh xạ URL mạnh mẽ cho phép bạn xây dựngnhững ứng dụng có các địa chỉ URL xúc tích và dễ tìm kiếm Các địa chỉ URLkhông cần phải có phần mở rộng của tên tập tin và được thiết kế để hỗ trợ các mẫuđịnh dạng tên phù hợp với việc tối ưu hóa tìm kiếm (URL) và phù hợp với lập địachỉ theo kiểu REST

+ Hỗ trợ sử dụng đặc tả (các thẻ) của các trang ASP.NET(.aspx), điều khiểnngười dùng (.ascx) và trang master page (.marter)

+ Hỗ trợ các tính năng có sẵn của ASP.NET như cơ chế xác thực người dùng,quản lý thành viên, quyền, output caching và data caching, seession và profile, quản

Trang 20

1.2.5 Tạo ứng dụng ASP.Net MVC trong Visual Studio 2015

Bước 1: Tạo Project và lựa chọn kiểu ứng dụng Asp.net MVC cần phát triển ChọnNew Project, sau đó lựa chọn Visual C# phía bên trái và chọn Web và lựa chọnASP.NET Web Application Đưa tên Ứng dúng Asp.Net MVC vào"MvcFirstApp",chọn thư mục lưu trữ và click OK để chuyển sang màn hình khác

Hình 1.4: Tạo Project mới cho ứng dụng ASP.Net

Bước 2: Chọn cấu hình ứng dụng ASP.Net MVC, chọn Empty cho ứng dụng đầu này

Hình 1.5: Cấu hình cho ứng dụng

Trang 21

Sau đó Click OK để tạo project

Hình 1.6: Tạo project thành công

Bước 3 : Chạy chương trình sử dụng (F5 hoặc Menu Debug/Start Debugging).Chúng ta sẽ nhìn thấy thông báo lỗi ở hình 1.7, do đây là project rỗng, khi chạychương trình:

Routing engine kiểm tra cấu hình điều hướng trong file RouteConfig nằm trongthưc mục App_Start của ứng dụng, chuyển đến các controller “Home” và action

“Index” để thực thi

Do Home Controller và phương thức Index không được tìm thấy, bộ điều hướng

sẽ chỉ ra rằng controller không được tìm thấy và MVC Engine sẽ báo lỗi cho trìnhduyệt

Hình 1.7: Lỗi khi chạy ứng dụng rỗng

Trang 22

Bước 4 : Thêm mới control Home và phương thức Index để thực hiện chươngtrình, thông qua các bước sau :

Click phải vào thưc mục Controllers trong thư mục ứng dụng, chọn Add sau đólựa chọn Controller từ pop-up menus

Chọn MVC 5 Control-Empty để tạo Control

Hình 1.8: Tạo control mới để thực hiện chương trình

Bước 5 : Chạy lại chương trình chương trình Chúng ta sẽ nhìn thấy thông báolỗi, do đây ASP.Net MVC chưa tìm thấy view tương ứng với Control Home vàphương thức Index

Trang 23

Hình 1.9: Lỗi view khi chạy chương trình

Bước 6 : Tạo mới View, thông qua các bước sau :

Click phải vào phương thức Index trong Controller Home, sau đó chọn AddView

Bổ sung một số các thuộc tính khi Add View, ví dụ như sử dụng Layout Page

Hình 1.10: Tạo mới view

Bước 7 : Xem và chỉnh sửa nội dung của View

Trang 24

Hình 1.11: Xem và chỉnh sửa nội dung của View

Bước 8: Tiến hành chạy chương trình

1.3 Đặc điểm chung của vườn quốc gia- Thế nào là vườn quốc gia, tình trạng vườn quốc gia ở Việt Nam

1.3.1.Vườn quốc gia là gì? [4]

Vườn quốc gia là một khu vực đất hay biển được bảo tồn bằng các quy định phápluật của chính quyền sở tại Vườn quốc gia được bảo vệ nghiêm ngặt khỏi sự khai thác,can thiệp bởi con người Vườn quốc gia thường được thành lập ở những khu vực có địamạo độc đáo có giá trị khoa học hoặc những khu vực có hệ sinh thái phong phú, cónhiều loài động – thực vật có nguy cơ tuyệt chủng cao cần được bảo vệ nghiêm ngặttrước sự khai thác của con người Theo quyết định số 186/2006/QĐ-TTG ngày 14tháng 8 năm 2006 của Thủ tướng Chính phủ Việt Nam thì vườn quốc gia là một dạngrừng đặc dụng được xác định trên các tiêu chí như sau:

+ Vườn quốc gia là khu vực tự nhiên trên đất liền hoặc ở vùng đất ngập nước,hải đảo, có diện tích đủ lớn được xác lập để bảo tồn một hay nhiều hệ sinh thái đặctrưng, bảo tồn các loài sinh vật đặc hữu hoặc đang nguy cấp

Trang 25

+Vườn quốc gia được quản lý, sử dụng chủ yếu phục vụ cho việc bảo tồn rừng

và hệ sinh thái rừng, nghiên cứu khoa học, giáo dục môi trường và du lịch sinh thái.+ Vườn quốc gia được xác lập dựa trên các tiêu chí và chỉ số: về hệ sinh tháiđặc trưng; các loài động vật, thực vật, đặc hữu; về diện tích tự nhiên của vườn và tỷ

lệ diện tích đất nông nghiệp, đất thổ cư so với diện tích tự nhiên của vườn

1.3.2 Tình trạng vườn quốc gia Việt Nam nói chung.

Vườn quốc gia tại Việt Nam là một danh hiệu được Chính phủ Việt Nam côngnhận chính thức thông qua nghị định Đến tháng 8/2015, cả nước có 31 vườn quốcgia gồm: Ba Bể, Bái Tử Long, Hoàng Liên, Du Già-Cao nguyên đá Đồng Văn,TamĐảo, Xuân Sơn, Ba Vì, Cát Bà, Xuân Thủy, Cúc Phương, Bến En, Pù Mát, VũQuang, Phong Nha-Kẻ Bàng, Bạch Mã, Núi Chúa, Bidoup Núi Bà, Phước Bình,Chư Mom Ray, Chư Yang Sin, Kon Ka Kinh, Yok Đôn, Lò Gò-Xa Mát, TràmChim, Mũi Cà Mau, U Minh Hạ, U Minh Thượng, Phú Quốc, Côn Đảo

Có 4 vườn quốc gia được công nhận di sản ASEAN đó là vườn quốc gia HoàngLiên, Ba Bể, Chư Mom Ray và Kon Ka Kinh Để được công nhận là vườn di sản,vườn quốc gia phải đảm bảo được các tiêu chí về tính tự nhiên, hoang dã, tínhnguyên vẹn về hệ sinh thái, sự đa dạng và giá trị nổi bật quần thể

1.3.3 Tình trạng của vườn quốc gia Xuân Sơn:

Vườn quốc gia Xuân Sơn là một vườn quốc gia nằm trên địa bàn huyện Tân Sơn,tỉnh Phú Thọ Với kiểu địa hình núi đá vôi đặc trưng Được chuyển từ khu bảo tồnthiên nhiên Xuân Sơn thành vườn quốc gia theo Quyết định của Thủ tướng chínhphủ Cộng hòa xã hội chủ nghĩa Việt Nam số 49/2002/QĐ-TTg ngày 17 tháng 4 năm2002

- Vị trí địa lý:

Vườn quốc gia Xuân Sơn nằm ở huyện Tân Sơn, tỉnh Phú Thọ, cách thành phốViệt Trì 80 km, Hà Nội 120 km, có phạm vi ranh giới được xác định như sau:

+ Phía Đông: Giáp các xã Tân Phú, Minh Đài, Long Cốc, huyện Tân Sơn

+ Phía Tây: Giáp huyện Phù Yên (tỉnh Sơn La), huyện Đà Bắc (tỉnh Hoà Bình)

Trang 26

+ Phía Nam: Giáp huyện Đà Bắc (tỉnh Hoà Bình).

+ Phía Bắc: Giáp xã Thu Cúc, huyện Tân Sơn

Tọa độ địa lý: Từ 21°03' đến 21°12' vĩ bắc và từ 104°51' đến 105°01' kinh đông

Hình 1.12: Vườn quốc gia Xuân Sơn - Phú Thọ

Tuy nhiên do đặc thù điều kiện tự nhiên, kinh tế - xã hội nơi đây dẫn đến nhữngnguy cơ, thách thức trong công tác bảo tồn đa dạng hệ thực vật chủ yếu là:

+ Khai thác lâm sản trái phép

Số lượng nhiều loài cây gỗ quý hiếm tại đây đang giảm do tình trạng khai thác,đốt nương làm rẫy… vẫn thường xuyên xảy ra. Vườn đang nỗ lực bảo tồn cácnguồn gen thực vật quý hiếm

Trang 27

Hình 1.13: Ươm giống cây quý hiếm ở VQG Xuân Sơn

+ Cháy rừng

+ Tổ chức quản lý: Đội ngũ cán bộ và nhân viên quản lý VQG Xuân Sơn còn ít

và thiếu lại phải quản lý trên một địa bàn rộng, địa hình phức tạp, nên còn gặp rấtnhiều khó khăn

Do đó, việc xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườnquốc gia Xuân Sơn là điều rất cần thiết

CHƯƠNG 2:PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ

XÂY DỰNG CƠ SỞ DỮ LIỆU2.1 Phân tích thiết kế hệ thống

Khái quát chức năng chính của hệ thống, các chức năng có tính tổng quát dễ dàng nhìn thấy được trên quan điểm của các tác nhân Dựa vào yêu cầu của bài toán

ta có usecase tổng quát như sau:

Xác định actor bài toán

Bảng 2.1: Các Actor của bài toán

1 Người dùng Là người chỉ có thể xem chi tiết tên

cây, số lượng cây thống kê theo loại,

 

Trang 28

tìm kiếm cây, xem khoanh vùng theoloại cây, xem mô tả thông tin của cáccây và các khu vực quản lý

Là bộ phận quản lý, người chịu tráchnhiệm chính của hệ thống, duy trì điều hành toàn bộ phần mềm, có quyền lực nhất trong hệ thống như: tìm kiếm cây, thêm cây, sửa cây, xóacây, xem chi tiết về cây, xem khoanhvùng theo loại cây, thống kê số lượng cây theo loại và thêm mới khuvực quản lý

 

Trang 29

2.1.1 Biểu đồ UseCase tổng quát

Hình 2.1:Biểu đồ UseCase tổng quát

Mô tả các chức năng chính của hệ thống

Ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơntỉnh Phú Thọ sử dụng mã nguồn mở Google map Javascript API được xây dựnggồm các chức năng chính sau:

Trang 30

- Chức năng cập nhật thông tin: Thêm mới thông tin về cây gỗ quý, chức năngthêm mới bao gồm: xét vị trí về kinh độ, tọa độ, tên cây gỗ quý, thuộc nhóm loạicây gỗ quý, mô tả về cây gỗ quý, cập nhật hình ảnh mô tả cây …

- Chức năng chỉnh sửa thông tin: Chỉnh sửa thông tin vùng quản lý, chỉnh sửathông tin cây gỗ quý bao gồm: Chỉnh sửa vị trí cây, tên cây, nhóm cây gỗ quý, mô

tả và hình ảnh mô tả cây gỗ quý…

- Chức năng xóa thông tin: Xóa thông tin cây gỗ quý, xóa vùng quản lý

- Chức năng thống kê: Thống kê danh mục cây gỗ quý theo nhóm loại cây và tổng số tất cả các cây gỗ quý được quản lý

- Chức năng tìm kiếm: Tìm kiếm thông tin cây gỗ quý

- Chức năng khoanh vùng: Khoanh vùng cây gỗ quý theo nhóm loại cây

- Chức năng xem chi tiết cây: Xem chi tiết thông tin cây về vị trí, tên cây và các thông tin mô tả về loại cây đang được quan tâm

- Chức năng thêm mới 1 vùng quản lý: Để mở rộng sang vùng quản lý khác thìquản trị viên có thể thêm 1 vùng quản lý mới

2.1.2 Biểu đồ phân rã các chức năng của hệ thống của Admin

a.Biểu đồ phân rã chức năng đăng nhập

- Tên Use Case : Đăng nhập

- Tác nhân: Admin

- Điều kiện: Đăng nhập được vào hệ thống thì cần user và password đúng

- Mô tả:

 Admin kích hoạt hệ thống

 Hệ thống hiển thị Form Đăng nhập

 Hệ thống hiển thị các tùy chọn: Đăng nhập,Quên mật khẩu

 Hệ thống hiển thị Form để nhập các thông tin tên tài khoản, mật khẩu

 Người dùng nhập thông tin và chọn button “Đăng nhập”

 Hệ thống kiểm tra thông tin trong cơ sở dữ liệu

 Hệ thống thông báo đăng nhập thành công và hiển thị Form Main

Trang 31

Trường hợp đăng nhập không thành công, click vào button “Quên mật khẩu”

và cung cấp gmail nếu đúng thì sẽ được hệ thống cấp lại mật khẩu

Hình 2.2 : Đăng nhập hệ thống

b Biểu đồ phân rã chức năng“Cập nhật cây”

- Tên Use Case : Cập nhật cây

 Admin chọn thêm cây vào mục cập nhật

 Hệ thống hiển thị Form Cập nhật thêm mới cây

 Người dùng nhập vào loại cây gỗ quý cần cập nhật

 Hệ thống hiển thị các tùy chọn:Lưu, Hủy

 Admin nhập thông tin và chọn button “Lưu”

 Hệ thống kiểm tra thông tin trong cơ sở dữ liệu

 Hệ thống thông báo nhập thành công và hiển thị

Trang 32

 Nếu người dùng chọn Hủy hoặc là ghi thiếu các thông tin về cây gỗ quý thìcập nhật thêm mới sẽ báo lỗi và cây không được thêm vào dữ liệu.

Hình 2.3 : Cập nhật thêm mới cây

c Biểu đồ phân rã chức năng “ Chỉnh sửa thông tin”

-Tên Use Case : Chỉnh sửa thông tin

 Hệ thống hiển thị Form Chỉnh sửa cây

 Người dùng chọn cây gỗ quý cần chỉnh sửa thông tin

 Hệ thống hiển thị các tùy chọn:Lưu, Hủy

 Admin nhập thông tin và chọn button “Lưu”

 Hệ thống kiểm tra thông tin trong cơ sở dữ liệu

 Hệ thống thông báo nhập thành công và hiển thị

Trang 33

 Nếu người dùng chọn “Hủy” hoặc là ghi thiếu các thông tin về cây gỗ quý thìchỉnh sửa sẽ báo lỗi và chi tiết cây không được chỉnh sửa thành công.

Hình 2.4 : Chỉnh sửa thông tin cây gỗ quý

d.Biểu đồ phân rã chức năng “ Khoanh vùng cây gỗ quý”

- Tên Use Case :Khoanh vùng cây gỗ quý

 Hệ thống hiển thị danh sách các nhóm loại cây tùy chọn

 Admin chọn nhóm loại cây cần “Khoanh vùng”

 Hệ thống kiểm tra thông tin trong cơ sở dữ liệu

 Hệ thống tiến hành khoanh vùng loại cây

Trang 34

Hình 2.5 : Khoanh vùng cây gỗ quý

e.Biểu đồ phân rã chức năng “ Tìm kiếm cây gỗ quý”

- Tên Use Case : Tìm kiếm cây gỗ quý

- Tác nhân: Admin

- Điều kiện: Phải đăng nhập được vào hệ thống

- Mô tả:

 Admin kích hoạt hệ thống

 Hệ thống hiển thị Form Tìm kiếm

 Admin chọn loại cây cần “Tìm kiếm”

 Hệ thống kiểm tra thông tin trong cơ sở dữ liệu

 Hệ thống tiến hành hiện thị nội dung của cây được tìm kiếm

Ngày đăng: 14/07/2017, 22:33

HÌNH ẢNH LIÊN QUAN

Hình 1.3: Mẫu Model – View – Controller Models:  Các đối tượng Models là một phần của ứng dụng, các đối tượng này - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 1.3 Mẫu Model – View – Controller Models: Các đối tượng Models là một phần của ứng dụng, các đối tượng này (Trang 13)
Bảng 2.1: Các Actor của bài toán - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Bảng 2.1 Các Actor của bài toán (Trang 24)
Hình 2.2 : Đăng nhập hệ thống - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 2.2 Đăng nhập hệ thống (Trang 27)
Hình 2.3 : Cập nhật thêm mới cây - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 2.3 Cập nhật thêm mới cây (Trang 28)
Hình 2.4 : Chỉnh sửa thông tin cây gỗ quý - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 2.4 Chỉnh sửa thông tin cây gỗ quý (Trang 29)
Hình 2.21: Biểu đồ tuần tự cho chức năng chỉnh sửa - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 2.21 Biểu đồ tuần tự cho chức năng chỉnh sửa (Trang 42)
Bảng 2.1: Cơ sở dữ liệu LocalMap - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Bảng 2.1 Cơ sở dữ liệu LocalMap (Trang 46)
Bảng 2.4: Cơ sở dữ liệu hình ảnh - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Bảng 2.4 Cơ sở dữ liệu hình ảnh (Trang 47)
Hình ảnh Không - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
nh ảnh Không (Trang 47)
Hình 3.12: Chức năng xóa thông tin cây gỗ j.Chức năng khoanh vùng loại cây: - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 3.12 Chức năng xóa thông tin cây gỗ j.Chức năng khoanh vùng loại cây: (Trang 57)
Hình 3.13: Marker - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 3.13 Marker (Trang 57)
Hình 3.15: Chức năng khoanh vùng dạng đường - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 3.15 Chức năng khoanh vùng dạng đường (Trang 58)
Hình 3.18: Xóa khu vực quản lý - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 3.18 Xóa khu vực quản lý (Trang 60)
Hình 3.20: Chức năng xem chi tiết cây của người dùng - Xây dựng ứng dụng trực tuyến theo dõi và quản lý cây gỗ quý vườn quốc gia Xuân Sơn, tỉnh Phú Thọ sử dụng mã nguồn mở Google Map Javascript API
Hình 3.20 Chức năng xem chi tiết cây của người dùng (Trang 61)

TỪ KHÓA LIÊN QUAN

TRÍCH ĐOẠN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w