Khóa luận tốt nghiệp: Xây dựng website tìm kiếm địa điểm thú y, dịch vụ thú cưng

Khóa luận tốt nghiệp xây dựng website tìm địa điểm thú y, dịch vụ chăm sóc thú cưng. Báo cáo đầy đủ các bước phân tích, thiết kế và triển khai.

Chuyên ngành

Công nghệ phần mềm

Người đăng

Ẩn danh

Thể loại

Khoá luận tốt nghiệp

2016-2020

101
0
0

Phí lưu trữ

35 Point

Tóm tắt

I. Tổng quan về đồ án Web tìm địa điểm chăm sóc thú cưng

Đồ án tốt nghiệp về xây dựng website tìm kiếm địa điểm thú y và cửa hàng dịch vụ chăm sóc thú cưng là một công trình học thuật nhằm giải quyết nhu cầu thực tiễn trong lĩnh vực chăm sóc động vật nuôi. Đề tài này được thực hiện bởi sinh viên Nguyễn Anh Sang từ Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, khóa 2016-2020. Với sự hướng dẫn của Tiến sĩ Lê Văn Vinh, đồ án này tập trung vào việc xây dựng một nền tảng số hóa giúp người dùng dễ dàng tìm kiếm các địa điểm cung cấp dịch vụ chăm sóc thú cưng chất lượng. Nhu cầu xây dựng website tìm kiếm dịch vụ chăm sóc thú cưng đang ngày càng tăng cao khi lĩnh vực này phát triển nhanh chóng tại Việt Nam.

1.1. Tính cấp thiết của đề tài

Thị trường dịch vụ chăm sóc thú cưng tại Việt Nam đang phát triển mạnh mẽ nhưng vẫn thiếu các công cụ tìm kiếm tập trung. Người nuôi thú cưng gặp khó khăn trong việc tìm kiếm địa điểm thú y uy tín, cửa hàng dịch vụ chăm sóc và các tiện ích liên quan. Xây dựng một nền tảng web chuyên biệt giúp kết nối người dùng với các dịch vụ chất lượng là yêu cầu cấp thiết, đáp ứng nhu cầu thực tế của thị trường hiện đại.

1.2. Mục tiêu chính của đồ án

Mục tiêu chính của đồ án tốt nghiệp này là tạo ra một website tìm kiếm địa điểm thú y và dịch vụ chăm sóc thú cưng toàn diện, thân thiện với người dùng. Đồ án sẽ cung cấp các tính năng tìm kiếm nâng cao, hiển thị thông tin chi tiết về các địa điểm, hệ thống bình luận và đánh giá, giúp người dùng đưa ra quyết định đúng đắn.

II. Công nghệ và công cụ sử dụng trong đồ án

Đồ án tốt nghiệp này sử dụng các công nghệ hiện đại để xây dựng một website tìm kiếm dịch vụ chăm sóc thú cưng hoàn chỉnh. Stack công nghệ bao gồm ReactJS cho frontend, NodeJSExpressJS cho backend, cùng MongoDB là hệ quản trị cơ sở dữ liệu. Lựa chọn các công nghệ này giúp đảm bảo hiệu suất cao, khả năng mở rộng tốt và trải nghiệp người dùng mượt mà. Phần mềm được thiết kế theo mô hình MVC (Model-View-Controller), cho phép phân chia rõ ràng các lớp logic ứng dụng. Từ 15/03/2020 đến 20/06/2020, đồ án website chăm sóc thú cưng đã trải qua quá trình phát triển từng bước, từ phân tích yêu cầu đến triển khai và kiểm thử.

2.1. Framework ReactJS và frontend development

ReactJS là thư viện JavaScript được sử dụng để xây dựng giao diện website chăm sóc thú cưng có tính tương tác cao. Công nghệ này cho phép tạo các component tái sử dụng, quản lý state hiệu quả và cung cấp trải nghiệp người dùng mượt mà. Giao diện web được thiết kế thân thiện, hỗ trợ responsive design để hiển thị tốt trên các thiết bị khác nhau.

2.2. Backend NodeJS ExpressJS và MongoDB

NodeJSExpressJS được sử dụng để xây dựng API backend xử lý các yêu cầu từ client. MongoDB là cơ sở dữ liệu NoSQL được chọn để lưu trữ thông tin về địa điểm dịch vụ chăm sóc thú cưng, người dùng và các dữ liệu liên quan. Kiến trúc này cho phép website tìm kiếm hoạt động nhanh chóng, xử lý lượng dữ liệu lớn hiệu quả.

III. Cấu trúc chức năng và thiết kế của ứng dụng

Đồ án website tìm kiếm dịch vụ chăm sóc thú cưng được chia thành ba nhóm người dùng chính: Guest (khách), User (người dùng đã đăng ký) và Admin (quản trị viên). Mỗi nhóm có các quyền hạn và chức năng khác nhau. Hệ thống tìm kiếm địa điểm thú y cung cấp các bộ lọc nâng cao, cho phép người dùng tìm kiếm theo khu vực, loại dịch vụ, giờ mở cửa. Giao diện được thiết kế trực quan với các màn hình giao diện chuyên biệt cho từng loại người dùng. Cơ sở dữ liệu được mô hình hóa chi tiết để đảm bảo tính toàn vẹn và hiệu suất cao trong quá trình truy vấn.

3.1. Chức năng cho Guest và User

Guest có thể xem danh sách địa điểm chăm sóc thú cưng, tìm kiếm theo tiêu chí khác nhau, xem chi tiết địa điểm và bình luận. User đã đăng ký có thêm quyền tạo bài viết, bình luận, lưu địa điểm yêu thích, quản lý hồ sơ cá nhân và thay đổi mật khẩu. Các chức năng đăng ký, đăng nhập, quên mật khẩu được triển khai hoàn chỉnh với xác thực an toàn.

3.2. Chức năng quản trị và kiểm thử

Admin có quyền quản lý toàn bộ nội dung website tìm kiếm dịch vụ thú cưng, bao gồm duyệt địa điểm mới, quản lý người dùng, xóa bình luận không phù hợp. Đồ án đã thực hiện kiểm thử chương trình chi tiết, khắc phục lỗi và hoàn thiện sản phẩm cuối cùng theo lịch trình từ 10/05 đến 20/06/2020.

IV. Quá trình phát triển và kết quả đạt được

Đồ án tốt nghiệp về website tìm kiếm dịch vụ chăm sóc thú cưng đã hoàn thành thành công sau ba tháng phát triển tích cực. Quá trình thực hiện được chia thành các giai đoạn rõ ràng: khảo sát hiện trạng, mô hình hóa yêu cầu, thiết kế cơ sở dữ liệu, xây dựng giao diện và backend, tích hợp API. Sản phẩm cuối cùng là một nền tảng web chuyên biệt cho phép người dùng dễ dàng tìm kiếm địa điểm thú y và dịch vụ chăm sóc thú cưng chất lượng. Báo cáo khoá luận chi tiết ghi lại toàn bộ quá trình từ lý thuyết đến triển khai thực tế, với các tài liệu tham khảo khoa học.

4.1. Các giai đoạn phát triển chính

Từ tuần 1-3 (15/03-04/04), nhóm tập trung vào khảo sát hiện trạng các website tương tự và xây dựng use case diagram, class diagram, sequence diagram. Tuần 4-11 dành cho phát triển giao diện ReactJSxây dựng backend NodeJS. Giai đoạn cuối cùng (tuần 12-15) là tích hợp API, kiểm thử và hoàn thiện sản phẩm.

4.2. Kết quả và giá trị của đồ án

Đồ án website chăm sóc thú cưng đạt được các mục tiêu đề ra, cung cấp một nền tảng tìm kiếm dịch vụ hoàn chỉnh, an toàn và dễ sử dụng. Sản phẩm có tiềm năng ứng dụng thực tế cao, có thể phát triển thành một dịch vụ thương mại điện tử. Khoá luận tốt nghiệp này là kết quả của sự nỗ lực và hợp tác giữa sinh viên, giáo viên hướng dẫn và trường học.

28/12/2025

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Khái niệm ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi Facebook để tạo ra những ứng dụng web hấp dẫn, nhanh và hiệu quả với mã hóa tối thiểu. Mục đích cốt lõi của ReactJS không chỉ khiến cho trang web phải thật mượt mà còn phải nhanh, khả năng mở rộng cao và đơn giản. Sức mạnh của nó xuất phát từ việc tập trung vào các thành phần riêng lẻ.

Chính vì vậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phép một developer có thể phá vỡ giao diện người dùng phức tạp thành các thành phần đơn giản hơn. Các đặc trưng cơ bản JSX Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX. JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent. JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương.

Single-way data flow ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt chẽ với nhau. Tại sao chúng ta phải quan tâm tới cấu trúc và mối quan hệ giữa các component trong ReactJS? Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu một chiều từ cha xuống con. Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án. Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình 21 1.

NodeJS và ExpressJS 1.js là một JavaScript runtime được build dựa trên engine JavaScript V8 của Chrome.js sử dụng kiến trúc hướng sự kiện event-driven, mô hình non- blocking I/O làm cho nó nhẹ và hiệu quả hơn. Hệ thống nén của Node.js, npm, là hệ thống thư viện nguồn mở lớn nhất thế giới. ExpressJS ExpressJS là một web framework được xây dựng trên nền tảng NodeJs. Expressjs cung cấp các hàm HTTP và midleware để tạo ra API đơn giản và dễ sử dụng.

ExpressJS được phát hành theo giấy phép mã nguồn mở, có cộng đồng hỗ trợ lớn, được phép sử dụng cho ứng dụng có mục đích thương mại. Do vậy bạn hoàn toàn có thể yên tâm sử dụng framework này cho dự án của mình, từ dự án nhỏ tới lớn. Cấu trúc thư mục dự án khi sử dụng ExpressJS được chia là 3 phần: routes, Views và Public. ExpressJS xây dựng ứng dụng web theo đúng mô hình MVC (Model – View – Controller).

Một số chức năng chính của ExpressJS: - Hỗ trợ middleware để trả về các HTTP request - Định nghĩa route dựa trên các action của HTTP (CRUD) - Cho phép trả về các trang html sử dụng các template engine (jade, pug…) 1. MongoDB MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng. MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh. Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server…) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng.

So với RDBMS thì trong 22 MongoDB collection ứng với table, còn document sẽ ứng với row, MongoDB sẽ dùng các document thay cho row trong RDBMS. Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định. Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2.

KHẢO SÁT MỘT SỐ TRANG WEB 2.vn/ (website tìm kiếm địa điểm ăn uống) • Ưu điểm: - Giao diện: + Phông chữ, nền, màu sắc hiện đại, hài hoà, tạo cảm giác thân thiện. - Chức năng: + Đáp ứng được nhu cầu tìm kiếm của người dùng + Thông tin rõ ràng + Tốc độ load trang nhanh • Nhược điểm: - Giao diện: + Bố cục hiển thị gợi ý ở trang chủ chưa hợp lý, gây rối - Chức năng: + Bộ lọc tìm kiếm chưa cụ thể, dẫn đến kết quả tìm kiếm ko sát với yêu cầu 24 2.com/ (website tìm kiếm phòng trọ) • Ưu điểm: - Giao diện: + Đơn giản, dễ thao tác + Đi thẳng vào yêu cầu người dùng - Chức năng: + Đáp ứng đúng nhu cầu người dùng là tìm trọ, ko lan man + Chức năng tìm kiếm sâu và sát • Nhược điểm: - Giao diện: + Do quá đơn giản nên ko để lại ấn tượng + Cảm giác cũ kỹ - Chức năng: + Tương tác người dùng thấp + Đánh giá, xếp hạng chủ quan, ko có ý kiến người dùng. + Do chức năng tìm kiếm rộng nên xảy ra một số lỗi trong quá trình tìm kiếm 25 2.com/ (website tìm kiếm địa điểm ăn uống) Ưu điểm: Giao diện: - + Đơn giản, thân thiện + Nội dung đa dạng, phong phú - Chức năng: + Đa dạng + Tương tác người dùng cao • Nhược điểm: - Giao diện: + Do thông tin nhiều dẫn đến bố cục gây rối cho người dùng - Chức năng: + Tốc độ load trang chậm + Một số chức năng không còn hoạt động 2. KẾT LUẬN VỀ NHỮNG TIÊU CHÍ WEBSITE CẦN ĐẠT ĐƯỢC Từ những khảo sát trên, nhóm đưa ra nhận định chung: Để có một website tìm kiếm địa điểm tốt cần phải đạt được những yếu tố sau: • Về giao diện: - Mới mẻ, trực quan, bắt mắt, dễ sử dụng - Hình ảnh sinh động, nội dung hiển thị vừa đủ, không quá ôm đồm • Về chức năng: 26 - Tốc độ tải trang nhanh, tạo cảm giác thoải mái cho người dùng - Có mục đánh giá, tương tác người dùng để thuận tiện cho khách hàng sau có thêm thông tin, cũng như cửa hàng, doanh nghiệp có số liệu thống kê để định hướng phát triển - Có đầy đủ chức năng cơ bản, độ chính xác cao - Tạo dựng niềm tin phải được ưu tiên, nội dung khách quan, thông tin đầy đủ, xác thực.

Nhóm sẽ xây dựng website tìm kiếm địa điểm tốt, đạt được những yếu tố đã đưa ra từ việc khảo sát, cũng như khắc phục những nhược điểm của các trang web đã khảo sát. CHƯƠNG 3: MÔ HÌNH HÓA YẾU CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU 3. USECASE DIAGRAM Hình 2.2 CHI TIẾT CÁC ACTOR 3.1 Các nghiệp vụ 28 STT Tên nghiệp vụ Loại nghiệp vụ Qui định Biểu mẫu Ghi chú 1 Đăng ký Lưu trữ QĐ_ĐK BM_ĐK 2 Đăng nhập Tra cứu QĐ_ĐN BM_ĐN 3 Quên mật khẩu Tra cứu QĐ_QMK BM_QMK 4 Xem trang chủ Tra cứu QĐ_XTC BM_XTC 5 Tìm kiếm địa điểm Tra cứu QĐ_TK BM_TK 6 Xem bài viết Tra cứu QĐ_XBV 7 Xem bình luận Tra cứu QĐ_XBL Bảng 2. 1 Nghiệp vụ Guest 29 3.2 Các quy định 1 QĐ_ĐK Đăng ký 1.

Use case cho phép guest đăng ký tạo 1 tài khoản để lưu trữ thông tin cá nhân. Điều kiện kích hoạt: người dùng click vào nút đăng nhập trên trang web, sau đó chọn đăng ký. Luồng sự kiện chính: 3. Người dùng phải nhập đủ thông tin cần thiết: Tên tài khoản, mật khẩu, tên, email, sđt.

Tên tài khoản có các kí tự cho phép: chữ in hoa (A-Z), chữ thường (a-z), chữ số (0-9), dấu gạch dưới, dấu gạch ngang, dâu chấm, không được bắt đầu bằng chữ số 0, độ dài từ (6-16) kí tự 3. Mật khẩu: Không được giống với tên tài khoản, các kí tự cho phép: chữ in hoa (A-Z), chữ thường (a-z), chữ số (0-9), độ dài từ (6-16) ký tự, không được bắt đầu bằng chữ số 0. Hệ thống kiểm tra thông tin đăng ký có hợp lệ.4 Nếu thành công hệ thống hiển thị thông báo. Kết thúc use case 4.

Luồng sự kiện phụ: 4. Tài khoản hoặc mật khẩu nhập không hợp lệ: 4. Hiển thị thông báo thông tin đăng ký không đúng 4. Vô hiệu hóa nút đăng ký.

Để trống thông tin người dùng: 4. Hiển thị thông báo không được bỏ trống 4. Vô hiệu hóa nút đăng ký 30 2 QĐ_ĐN Đăng 1. Use case cho phép guest đăng nhập vào hệ thống để nhập thực hiện các chức năng của admin hoặc user.

Điều kiện kích hoạt: người dùng click vào nút đăng nhập trên trang web. Luồng sự kiện chính: 3. Hiển thị popup đăng nhập. Người dùng phải nhập đúng thông tin: Tên tài khoản, mật khẩu.

Hệ thống kiểm tra thông tin đăng nhập có hợp lệ. Nếu thành công hệ thống hiển thị thông báo. Kết thúc use case 4. Luồng sự kiện phụ: 4.

Tài khoản hoặc mật khẩu nhập không hợp lệ: 4. Hiển thị thông báo tên đăng nhập hoặc mật khẩu không đúng và yêu cầu người dùng phải nhập lại. Use case cho phép guest lấy lại mật khẩu bằng mật email. Điều kiện kích hoạt: người dùng click vào nút quên mật khẩu 3.

Luồng sự kiện chính: 3. Hệ thống hiển thị màn hình như biểu mẫu(BM_QMK) Người dùng cần nhập đúng tài khoản và nhập email đã đăng ký để lấy lại mật khẩu. Hệ thống kiểm tra email có hợp lệ và gửi liên kết reset lại mật khẩu cho người dùng. khi lấy lại được mật khẩu thành công thì quay lại trang đăng nhập.

4 QĐ_XTC Xem Luồng sự kiện: trang - Xem những thông tin trên trang chủ: các bài viết vừa chủ đăng tải, các địa điểm có lượt đánh giá cao 5 QĐ_TK Tìm 1. Use case cho phép khách tìm kiếm bài viết theo nhu kiếm địa cầu điểm 2. Điều kiện kích hoạt: người dùng lựa chọn giá trị cần tìm trong trường tìm kiếm và nhấp tìm kiếm. Hiển thị trang các bài viết tìm được như BM_TK 6 QĐ_XBV Xem bài Luồng sự kiện: viết - Xem nội dung chi tiết của từng bài viết + Người dùng click vào 1 bài viết cụ thể trên website + Hệ thống chuyển sang trang hiển thị nội dung chi tiết về bài viết như (BM_X) 32 7 QĐ_XBL Xem - Điều kiện kích hoạt: người dùng chọn 1 bài viết bất kì bình và di chuyển xuống phần bình luận của bài viết luận - Xem các bình luận về bài viết của người dùng khác cũng như của bản thân nếu có.

2 Quy định Guest 3.3 Danh sách các biểu mẫu BM_ĐK (Màn hình đăng ký) Hình 2. 4 BM_XTC (trang chủ) BM_TK (Màn hình tìm kiếm) Hình 2.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ