Nhâ fn thức được t{m quan trọng đi nhim em đ| tìm hiểu, nghiên cứu và quyếtđịnh chọn đề tài: “Xây dựng Website hoa quả” với mục đích làm hoàn thiê fn hơncông tác quảng cáo , tiếp thị sản
KHẢO SÁT HIỆN TRẠNG VÀ XÁC LẬP DỰ ÁN
Lý do chọn đề tài
Trong thời đại hiện nay, sự phát triển mạnh mẽ của khoa học công nghệ đã dẫn đến sự ra đời của nhiều dịch vụ truyền thông mới nhằm đáp ứng nhu cầu ngày càng cao của con người Internet, đặc biệt là mạng xã hội, đang trở thành một trong những dịch vụ truyền thông hàng đầu, góp phần kết nối và tương tác giữa mọi người.
Dự án “Meng x| hội kết nối người chơi game: Play with me” tạo ra một website cho phép người dùng đăng tải bài viết, bình luận và chia sẻ cảm xúc với cộng đồng game thủ Hệ thống còn cung cấp tính năng gợi ý kết nối người dùng với những người có sở thích và sự tương đồng trong chơi game, giúp họ dễ dàng tìm bạn chơi.
Khảo sát hệ thống tương tự
Hiện nay, mua sắm trực tuyến đang trở thành xu hướng phổ biến nhờ sự phát triển mạnh mẽ của Internet Đây không chỉ là phương tiện truyền thông mà còn là môi trường kinh doanh đa dạng, từ hàng hóa gia dụng, nội thất cho đến thực phẩm Internet đã mở ra nhiều cơ hội mới cho người tiêu dùng và doanh nghiệp.
Trong bối cảnh dịch Covid-19, mua sắm online và tại nhà ngày càng phổ biến, với các trang web mua sắm trực tuyến mang lại sự tiện lợi cho người tiêu dùng Chỉ với vài cú click chuột, khách hàng có thể dễ dàng sở hữu những sản phẩm mong muốn, bao gồm cả hoa quả tươi và thực phẩm dinh dưỡng, rất tốt cho sức khỏe.
Hoa quả không chỉ cung cấp dinh dưỡng mà còn là nguồn cảm hứng cho sự sáng tạo trong nấu ăn và trang trí Chúng tượng trưng cho sức khỏe và sự phồn thịnh, đồng thời làm cho cuộc sống của chúng ta trở nên đa dạng và phong phú hơn.
Chúng tôi đã tổng hợp kiến thức và tài liệu tham khảo để xây dựng trang web "Website hoa quả online" Trang web này được thiết kế với các chức năng quan trọng, giúp người dùng dễ dàng tìm kiếm và mua sắm hoa quả một cách thuận tiện.
Các chức năng chính
Công cụ lập trình và ngôn ngữ được sử dụng
- Hệ quản trị cơ sở dữ liệu: MýQL Cloud
- Công cụ lập trình: Visual Studio Code
- Ngôn ngữ lập trình: NodeJS, ReactJS.
Giới thiệu ngôn ngữ lập trình NodeJS
NodeJS là nền tảng phía máy chủ được xây dựng trên công cụ JavaScript của Google Chrome (V8 Engine) Node.js được phát triển bởi Ryan Dahl trong năm
2009 và phiên bản mới nhất của ni là v0.10.36 Định nghua của Node.js được cung cấp bởi https://nodejs.org
Node.js là một môi trường mã nguồn mở đa nền tảng cho việc phát triển ứng dụng phía máy chủ và ứng dụng mạng Các ứng dụng Node.js được lập trình bằng JavaScript và có thể chạy trên các hệ điều hành như OS X, Microsoft Windows và Linux.
Node.js cung cấp một thư viện phong phú với nhiều mô-đun JavaScript, giúp đơn giản hóa quá trình phát triển ứng dụng web một cách hiệu quả.
Node.js = Runtime Environment + JavaScript Library
Giới thiệu về ReactJs
ReactJS là một thư viện JavaScript mã nguồn mở, giúp xây dựng các thành phần giao diện người dùng tái sử dụng, đặc biệt phù hợp với xu hướng Single Page Application Một trong những đặc điểm nổi bật của ReactJS là công nghệ Virtual DOM, giúp tăng hiệu suất cho ứng dụng Thư viện này được phát triển bởi Jordan Walke, một kỹ sư phần mềm tại Facebook, và lần đầu tiên được sử dụng cho ứng dụng Newsfeed của Facebook.
2011 sau đi được triển khai cho Instagram.
Mục tiêu chính của React là đơn giản hóa quá trình phát triển ứng dụng Tất cả các trạng thái được quản lý tại một thời điểm, thông qua việc chia giao diện người dùng thành các thành phần (components) riêng biệt.
Giới thiệu hệ quản trị cơ sở dữ liệu MongoDB, MySQL,
MongoDB là một cơ sở dữ liệu mã nguồn mở, được thiết kế theo kiểu hướng đối tượng, cho phép lưu trữ dữ liệu linh hoạt mà không cần tuân theo một cấu trúc cố định Nhờ vào tính linh hoạt này, MongoDB rất phù hợp để lưu trữ dữ liệu phức tạp, đa dạng và không cố định, thường được gọi là Big Data MongoDB hoạt động dựa trên mô hình Document, trong đó một Collection chứa nhiều Document khác nhau, với số trường, nội dung và kích thước có thể thay đổi giữa các Document Hệ sinh thái MongoDB còn được hỗ trợ bởi nhiều thư viện và Framework, giúp tối ưu hóa quá trình phát triển ứng dụng.
MySQL Server là hệ thống máy tính cài đặt phần mềm MySQL cho phép lưu trữ và quản lý dữ liệu trên máy chủ, giúp máy khách truy cập dễ dàng Dữ liệu được tổ chức trong các bảng có mối liên hệ với nhau, đảm bảo tính nhanh chóng, an toàn và đáng tin cậy Phần mềm MySQL hoàn toàn miễn phí và được phát triển, phân phối, hỗ trợ bởi Oracle Corporation.
MySQL Workbench là một công cụ hỗ trợ lập trình viên giao tiếp với cơ sở dữ liệu MySQL một cách dễ dàng, thay vì phải sử dụng các lệnh Command-line phức tạp Phần mềm này được thiết kế đơn giản, thân thiện với người dùng và tương thích với nhiều hệ điều hành như Microsoft Windows, Mac OS, Linux và Ubuntu.
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Bài toán đặt ra
C{n xây dựng một trang web hoa quả online cơ bản
Cơ bản bao gồm Đăng nhập
Trang sản phẩm (Hoa quả)
Sửa thông tin hoa quả
Sơ đồ chức năng
2.2.1 Tổng quát chức năng của hệ thống
Hình 1.1 Sơ đồ chức năng
Truy cập hệ thống: Người dùng ci thể đăng nhập, đăng xuất, đăng ký, thoát khỏi hệ thống
Người quản lý có trách nhiệm quản lý và phân loại hoa quả, bao gồm hoa quả trong nước và hoa quả nhập khẩu từ Mỹ Họ cũng cần cập nhật thông tin và quản lý nội dung trên trang bán hàng để đảm bảo thông tin luôn chính xác và hấp dẫn với khách hàng.
Tương tác khách hàng: Khách hàng ci thể truy cập trang web và xem cac mặt hàng và tìm kiếm các loei hoa quả mà khách hàng muốn
Phân tích chức năng nghiệp vụ
Lưu ý: Sản phẩm ở đây là “hoa quả”
Bước 1: Chọn đăng nhập hệ thống
Bước 2: Hiển thị màn hình giao diện đăng nhập
Bước 3: Điền thông tin đăng nhâp gồm:
Bước 4: Kiểm tra thông tin đ| nhập bao gồm:
Thông tin hợp lệ, đăng nhập thành công, hiển thị giao diện các chức năng của hệ thống.
Thông tin không hợp lệ, thông báo đăng nhập thất bei, hỏi đăng nhập lei. Chọn đăng nhập lei sẽ quay lei thao tác từ bước 2
Bước 6: Chọn chức năng đăng xuất sẽ thoát khỏi hệ thống
Hình 2.1 Đăng nhập hệ thống
2.3.2 Biểu đồ hoặt động chức năng thêm hoa quả
Hình 2.2 Biểu đồ hoạt động chức năng thêm s!n ph"m
Mô tả chi tiết biểu đồ hoạt động chức năng thêm hoa quả
Bước 1: Quản lý chọn chức năng thêm hoa quả
Bước 2: Hệ thống hiển thị thông tin c{n nhập
Bước 3: Nhập thông tin hoa quả
Bước 4: Hệ thống kiểm tra thông tin thêm sản phẩm gồm các thông tin đ| nêu ở Bước 5:
Để quản lý thông tin hoa quả hiệu quả, hệ thống sẽ lưu trữ thông tin hợp lệ vào cơ sở dữ liệu và đồng bộ hóa, đồng thời hiển thị thông báo xác nhận việc thêm hoa quả cùng với chi tiết thông tin đã được thêm Trong trường hợp thông tin không hợp lệ, hệ thống sẽ thông báo lỗi và quay lại bước 3 để thực hiện lại thao tác Cuối cùng, bước 6 sẽ cho phép người dùng quản lý chức năng liên quan đến hoa quả một cách dễ dàng.
2.3.3 Biểu đồ hoạt đô }ng chức năng sửa hoa quả
Hình 2.3 Biểu đồ hoạt động chức năng s$a hoa qu!
Mô tả chi tiết biểu đồ hoạt động chức năng sửa hoa quả
Bước 1: Quản lý chọn chức năng sửa hoa quả
Bước 2: Quản lý Nhập thông tin hoa quảc{n sửa
Bước 3: Hệ thống kiểm tra thông tin nhập vào
Thông tin hợp lệ, hệ thống hiển thị thông tin chi tiết hoa quảtìm kiếm Thông tin không hợp lệ, thông báo lỗi và quay lei thao tác bước 2
Bước 4: Nhập lei thông tin hoa quả
Bước 5: Hệ thống kiểm tra thông tin nhập vào
Thông tin hợp lệ: lưu thông tin hoa quả vào cơ sở dữ liệu và đồng bộ, hiển thị thông tin hoa quả sau khi sửa
Thông tin không hợp lệ: Thông báo lỗi và quay lei hiển thị thao tác từ bước 4 Bước 6: Quản lý đing chức năng quản lý hoa quả
2.3.4 Biểu đồ hoạt đô }ng chức năng xóa hoa quả
Hình 2.4 Biểu đồ hoạt động chức năng xóa hoa qu!
Mô tả chi tiết biểu đồ hoạt động chức năng xóa hoa quả:
Bước 1: Quản lý chọn chức năng xia hoa quả
Bước 2: Hệ thống hiển thị thông tin các hoa quả
Bước 3: Chủ cửa hàng chọn hoa quả c{n xia
Bước 4: Hệ thống kiểm tra thông tin thêm hoa quả đ| chọn
Để đảm bảo thông tin hợp lệ, hệ thống sẽ xóa dữ liệu và thông báo thành công Nếu thông tin không hợp lệ, sẽ có thông báo lỗi và quay lại hiển thị thao tác từ bước 3 Cuối cùng, bước 5 là quản lý chức năng quản lý hoa quả.
2.3.5 Biểu đồ hoạt đô }ng chức năng tìm kiếm hoa quả
Hình 2.5 Biểu đồ hoạt động chức năng tìm ki,m hoa qu!
Mô tả chi tiết biểu đồ hoạt động tìm kiếm hoa quả:
Bước 1: Quản lý chọn chức năng quản lý hoa quả
Bước 2: Hệ thống hiển thị các chức năng của quản lý hoa quả
Bước 3: Chọn chức năng tìm kiếm hoa quả
Bước 4: Nhập thông tin tìm kiếm gồm:
Bước 5: Chọn tìm kiếm thông tin
Bước 6: Hệ thống kiểm tra
Thông tin tìm kiếm hợp lệ sẽ hiển thị chi tiết về hoa quả cần tìm Trong trường hợp thông tin tìm kiếm không hợp lệ, hệ thống sẽ thông báo lỗi và yêu cầu người dùng quay lại bước 5 để nhập lại thông tin.
Bước 7: Chủ cửa hàng đing chức năng tìm quản lý hoa quả
Thiết kế cơ sở dữ liệu
2.4.2 Bảng sản phẩm (Hoa quả)
B!ng 2.2 B!ng s!n ph"m (Hoa qu!)
2.4.4 Bảng Chi tiết hóa đơn
B!ng 2.4 B!ng Chi ti,t hóa đơn
GIẢI PHÁP VÀ CÀI ĐẶT
Giải pháp công nghệ lựa chọn
Ngôn ngữ chính: Node js
Hệ quản trị cơ sở dữ liệu: MySql
Công cụ hỗ trợ: Visual studio code 2022
Cài đặt giao diện
Hình 3.1 Giao diện đăng nhập
Hình 3.2 Giao diện trang chủ
Hình 3.3 Giao diện đăng kí
3.2.4.1 Giao diện tất cả hoa quả
Hình 3.4 Giao diện tất c! hoa qu!
3.2.4.2 Giao diện hoa qua trong nước
Hình 3.5 Giao diện hoa qua trong nước
3.2.4.3 Giao diện hoa quả ngoài nước
Hình 3.6 Giao diện hoa qu! ngoài nước
3.2.4.4 Giao diện chi tiết hoa quả
Hình 3.7 Giao diện chi ti,t hoa qu!
3.2.5 Giao diện đăng nhập admin
3.2.7 Giao diện admin quản lý Hoa quả
Hình 3.10 Giao diện admin qu!n lý Hoa qu!
3.2.8 Giao diện admin thêm loại hoa quả
Hình 3.11 Giao diện admin thêm hoa qu!
3.2.9 Giao diện admin sửa loại hoa quả
Hình 3 Giao diện admin s$a hoa qu!12
3.2.10 Giao diện admin xóa loại hoa quả
Hình 3.13 Giao diện admin xóa loại hoa qu!
KẾT QUẢ
Hướng phát triển
- Tiếp tục phát triển ,cải thiện nội dung cxn hen chế
- Sớm đưa được website lên server và ci tên miền