Vì vậy mà em đã thực hiện đồ án “XÂY WEBSITE BÁN NÔNG SẢNSẠCH” với mong muốn đáp ứng nhu cầu của khách hàng, bằng cách thông qua hệthống Website này họ có thể đặt mua các mặt hàng hay sả
KHẢO SÁT VÀ SÁT ĐỊNH YÊU CẦU
Phân tích yêu cầu đề tài
- Xây dựng website bán nông sản sạch.
Trang web này là nơi bán và giới thiệu sản phẩm của cửa hàng, công ty đến người tiêu dùng một cách rõ ràng và chuyên nghiệp Trang cung cấp các thông tin chi tiết về mặt hàng, bao gồm mô tả sản phẩm và giá cả chính xác, giúp khách hàng dễ dàng lựa chọn Với các chức năng tiện ích như đặt hàng, thanh toán và hỗ trợ khách hàng, website giúp nâng cao trải nghiệm mua sắm trực tuyến hiệu quả và thuận tiện.
Cho phép cập nhật hàng vào cơ sở dữ liệu.
Hiển thị danh sách các mặt hàng theo từng loại.
Hiển thị hàng hoá khách hàng đã chọn mua.
Hiển thị thông tin khách hàng.
Quản lý đơn đặt hàng.
Cập nhật hàng hoá, nhà sản xuất, loại hàng.
Khách hàng là những người có nhu cầu mua sắm hàng hóa, họ sẽ tìm kiếm các mặt hàng cần thiết trên hệ thống và đặt mua các mặt hàng này Do đó, hệ thống thương mại điện tử cần có các chức năng phù hợp để hỗ trợ quá trình mua sắm của khách hàng, đảm bảo trải nghiệm mua hàng thuận tiện và hiệu quả.
Hiển thị danh sách các mặt hàng của cửa hàng để khách hàng xem, lựa chọn và mua.
+ Khách hàng xem các thông tin, khuyến mãi trên trang web.
+ Tiếp nhận kiểm tra đơn đặt hàng của khách hàng Hiển thị đơn đặt hàng.
An toàn thông tin khách hàng khi đặt mua qua mạng là yếu tố hàng đầu cần được đảm bảo, giúp xây dựng lòng tin và nâng cao trải nghiệm người dùng Bên cạnh đó, việc duy trì và đổi mới website thường xuyên không chỉ giữ cho trang web hấp dẫn mà còn tăng khả năng cạnh tranh trên thị trường trực tuyến.
Người quản trị hệ thống có quyền kiểm soát toàn bộ hoạt động, bắt đầu từ việc đăng nhập bằng username và password để thực hiện các chức năng quan trọng Họ có thể cập nhật, sửa, xóa các mặt hàng, loại hàng, nhà sản xuất, tài khoản khách hàng và slider, đồng thời tiếp nhận và kiểm tra các đơn đặt hàng của khách hàng Hệ thống cũng hiển thị tất cả các đơn đặt hàng để quản lý dễ dàng hơn.
Trang web cần được thiết kế thân thiện, dễ hiểu và giao diện hấp dẫn để khách hàng dễ dàng tìm kiếm thông tin cần thiết Ngoài ra, trang web phải cung cấp các nội dung quảng cáo hấp dẫn, tin tức khuyến mãi nổi bật nhằm thu hút khách hàng Đảm bảo an toàn tuyệt đối cho thông tin khách hàng trong quá trình đặt hàng trực tuyến là yếu tố hàng đầu Bên cạnh đó, việc thường xuyên cập nhật, đổi mới nội dung và giao diện của trang web giúp duy trì sự hấp dẫn và giữ chân khách hàng.
Phân tích và thiết kế hệ thống
2.1 Khảo sát hiện trạng và xây dựng hệ thống
– Sau khi khảo sát em đã nắm bắt được các thông tin :
Quản lý khách hàng: Mỗi khách hàng được quản lý các thông tin sau: họ tên, địa chỉ, số điện thoại, email,giới tính, ngày sinh.
Quản lý sản phẩm: Mã hàng hoá, tên hàng hoá, giá bán, số lượng tồn, hình ảnh, chi tiết, mã loại hàng, tên loại hàng.
Quản lý nhà sản xuất: Mã nhà sản xuất, tên nhà sản xuất,số điện thoại,địa chỉ.
Quản lý giỏ hàng: Danh sách đơn hàng thành công, danh sách đơn hàng thất bại, lịch sử giỏ hàng.
Sau khi khảo sát hiện trạng hệ thống và xây dựng cấu trúc phù hợp, tôi đã hoàn thiện các tệp cơ sở dữ liệu cho dự án "Xây dựng website bán nông sản sạch" Điều này giúp đảm bảo quản lý thông tin sản phẩm, khách hàng và đơn hàng hiệu quả Việc thiết kế database tối ưu hóa khả năng mở rộng và vận hành ổn định của website trong tương lai Đồng thời, các tệp dữ liệu này đóng vai trò quan trọng trong việc triển khai các chức năng bán hàng trực tuyến một cách mạch lạc và an toàn.
Sau quá trình khảo sát và phân tích thực trạng thị trường, chúng tôi đã xác định rõ nhu cầu về các sản phẩm nông sản sạch và an toàn cho người tiêu dùng Dựa trên đó, chúng tôi đã xây dựng hướng phát triển cho hệ thống mới, với mục tiêu tạo ra một website bán nông sản sạch uy tín, tiện lợi, giúp kết nối người nông dân với khách hàng một cách hiệu quả Cấu trúc của hệ thống được thiết kế tối ưu, đảm bảo tính bảo mật, thân thiện với người dùng, đồng thời tích hợp các chức năng thanh toán điện tử và quản lý đơn hàng chuyên nghiệp để nâng cao trải nghiệm mua sắm trực tuyến.
– Xây dựng biểu đồ phân cấp chức năng, biểu đồ luồng dữ liệu.
2.3 Sơ đồ phân cấp chức năng của khách hàng
Hình 1Sơ đồ chức năng khách hàng
– Chức năng xem thông tin sản phẩm
Cho phép xem các thông tin liên quan đến sản phẩm.
Liệt kê danh mục mặt hàng sản phẩm theo nhóm, chủng loại, chi tiết…cho phép khách hàng có thể lựa chọn, bổ xung mặt hàng vào giỏ hàng.
Đầu vào: Các thông tin liên quan đến sản phẩm : Tên mặt hàng
Các quá trình cần thực hiện:
Module liệt kê, hiển thị danh mục mặt hàng theo nhóm, loại, chi tiết.
Module thêm mặt hàng vào giỏ hàng.
Module loại bỏ mặt hàng trong giỏ hàng.
Module hiển thị danh mục mặt hàng có trong giỏ hàng.
Đầu ra: Danh mục mặt hàng định mua.
Khách hàng có thể đăng ký trở thành thành viên của cửa hàng để nhận tài khoản người dùng, giúp dễ dàng đăng nhập khi đặt hàng và thanh toán Việc trở thành thành viên mang lại lợi ích thuận tiện và trải nghiệm mua sắm nhanh chóng hơn Đăng ký thành viên là bước quan trọng để khách hàng quản lý đơn hàng và nhận các ưu đãi đặc biệt từ cửa hàng.
Các thông tin cá nhân của khách hàng.
+ Tài khoản + Mật khẩu + Tên khách hàng + Ngày tháng năm sinh + Giới tính
Các quá trình thực hiện :
+ Module nhập thông tin cá nhân của khách hàng.
+ Module xác nhận thông tin vừa nhập.
+ Module thông báo cho khách hàng và yêu cầu nhập lại tài khoản ngưòi dùng nếu tài khoản đó đã có người đăng ký.
+ Module lưu thông tin khách hàng vừa đăng ký vào cơ sở dữ liệu.
Thông báo cho khách hàng và yêu cầu nhập lại tài khoản hoặc Email nếu tài khoản hoặc Email đó đã tồn tại trong cơ sở dữ liệu.
Thông báo và yêu cầu nhập lại thông tin trong trường hợp thông tin nhập vào không chính xác, không phù hợp.
Chuyển sang trang đăng nhập.
Tìm kiếm thông tin về sản phẩm
+ Sản phẩm cần tìm kiếm.
Các quá trình thực hiện :
+ Module tìm kiếm trong cơ sở dữ liệu.
+ Module hiển thị kết quả tìm kiếm.
Đầu ra: Kết quả tìm kiếm.
Sau khi khách hàng chọn những sản phẩm cần mua đặt vào giỏ hàng, khách hàng có thể đặt mua hàng chính thức thông qua Website.
Danh mục mặt hàng trong giỏ hàng.
Thông tin cá nhân của khách hàng (Mã khách hàng, Họ tên, mật khẩu,…).
Thông tin liên quan đến việc mua hàng (ngày mua, số lượng mỗi mặt hàng đặt mua.
Các quá trình thực hiện :
Module hiển thị đầy đủ thông tin liên quan đến sản phẩm khách hàng đã chọn.
2.4 Sơ đồ phân cấp chức năng cùa quản lý sản phẩm
Hình 2 Sơ đồ quản lý sản phẩm
CƠ SỞ LÝ THUYÊT
ASP.NET
ASP.NET là nền tảng phát triển web mạnh mẽ, cung cấp nhiều mô hình lập trình và dịch vụ cần thiết để xây dựng các ứng dụng web hiệu quả cho máy tính và thiết bị di động.
ASP.NET là một phần quan trọng của nền tảng NET, cho phép mã dễ dàng biên dịch, viết, mở rộng và tái sử dụng hiệu quả trong môi trường NET Các ứng dụng ASP.NET có thể được phát triển bằng nhiều ngôn ngữ lập trình khác nhau như C#, Visual Basic NET, và F#, mang lại sự linh hoạt và đa dạng cho nhà phát triển Việc sử dụng ASP.NET giúp xây dựng các trang web, ứng dụng web mạnh mẽ, tối ưu hóa hiệu suất và dễ bảo trì, phù hợp với các yêu cầu phát triển phần mềm hiện đại.
ASP.NET là nền tảng lập trình phía Server, trong đó mã lệnh được biên dịch và thực thi trực tiếp trên Web Server Sau khi xử lý, kết quả từ Server sẽ tự động chuyển đổi thành các mã HTML, JavaScript và CSS để gửi về phía Client Tất cả các thao tác xử lý của ASP.NET đều diễn ra trên Server, chính vì vậy phương pháp này còn được gọi là kỹ thuật lập trình phía server.
ADO.NET
ADO.NET là một thư viện hướng đối tượng (OOP) giúp tương tác hiệu quả với dữ liệu nguồn, chủ yếu là các cơ sở dữ liệu (Database) Ngoài ra, ADO.NET cũng hỗ trợ xử lý các nguồn dữ liệu khác như file text, Excel hoặc XML Tuy nhiên, trong bài viết này, chúng ta tập trung vào khả năng của ADO.NET khi làm việc với các cơ sở dữ liệu để đảm bảo tính rõ ràng và chuyên sâu.
ADO.NET là một kỹ thuật trong NET giúp thao tác và truy vấn dữ liệu một cách hiệu quả Nó bao gồm tập hợp các lớp nằm trong bộ thư viện lớp cơ sở của NET Framework, hỗ trợ kết nối và quản lý dữ liệu từ nhiều nguồn khác nhau Với ADO.NET, lập trình viên có thể thực hiện các thao tác như đọc, ghi, cập nhật và quản lý dữ liệu dễ dàng và tối ưu.
Thư viện Boostrap
Bootstrap là một framework bao gồm HTML, CSS và JavaScript, giúp người dùng dễ dàng thiết kế website theo chuẩn nhất định Framework này tạo ra các website thân thiện với các thiết bị khác nhau, đảm bảo khả năng phản hồi linh hoạt và tối ưu trải nghiệm người dùng Với Bootstrap, việc xây dựng website chuyên nghiệp, dễ dàng và nhanh chóng trở nên đơn giản hơn bao giờ hết.
Bootstrap được tạo ra tại Twitter vào giữa năm 2010 như là một bản thiết kế nội bộ trước khi trở thành framework mã nguồn mở chính thức Sau khi phát triển trong vài tháng, Twitter tổ chức Tuần lễ Hack đầu tiên, thu hút nhiều nhà phát triển ở mọi trình độ tham gia dự án Trong hơn một năm sau đó, Bootstrap hoạt động như một hướng dẫn phong cách cho các công cụ nội bộ của Twitter, giữ vai trò quan trọng trong phát triển phần mềm của công ty Cho đến ngày nay, Bootstrap vẫn giữ vị trí trung tâm trong cộng đồng phát triển web với vai trò là một framework phổ biến và dễ sử dụng.
Kể từ lần phát hành đầu tiên vào ngày 19 tháng 8 năm 2011, Bootstrap đã trải qua hơn 20 phiên bản, bao gồm cả hai bản viết lại chính của Bootstrap 2 và Bootstrap 3 Bootstrap 2 nổi bật với tính năng responsive như một stylesheet tùy ý, giúp website hiển thị tốt trên nhiều thiết bị khác nhau Đến khi xây dựng Bootstrap 3, thư viện đã được viết lại hoàn toàn để tích hợp tính năng responsive một cách mặc định, nâng cao trải nghiệm người dùng và khả năng tùy biến website.
Dreamweaver
Dreamweaver là phần mềm thiết kế web mạnh mẽ, tích hợp trình soạn thảo lập trình HTML đầy đủ tính năng để tạo và chỉnh sửa các trang web chuyên nghiệp Với giao diện WYSIWYG thân thiện, Dreamweaver giúp người dùng dễ dàng thiết kế website một cách trực quan và hiệu quả.
Dreamweaver hỗ trợ nhiều ngôn ngữ đánh dấu như HTML, XML, CSS và JavaScript, giúp lập trình viên dễ dàng xây dựng website Ngoài ra, phần mềm còn hỗ trợ nhiều ngôn ngữ tự nhiên, bao gồm tiếng Anh, tiếng Tây Ban Nha, tiếng Pháp, tiếng Đức, tiếng Nhật, tiếng Trung, tiếng Ý, tiếng Nga và nhiều ngôn ngữ khác, phù hợp với người dùng toàn cầu.
Dreamweaver được phát triển và ra mắt lần đầu bởi Macromedia vào năm 1997, trở thành một trong những công cụ chỉnh sửa web phổ biến nhất Sau khi Adobe mua lại Macromedia vào năm 2005, hãng tiếp tục nâng cao và phát triển phần mềm này, tích hợp nhiều tính năng ưu việt Nhờ khả năng chỉnh sửa linh hoạt, Dreamweaver phù hợp để tạo các trang web phức tạp hoặc đơn giản, hỗ trợ lập trình viên và nhà thiết kế web tối ưu hóa quá trình phát triển website.
Dreamweaver CC is a versatile web development tool that functions as both a WYSIWYG and code editor for Windows and Mac computers It supports editing WordPress, Joomla, and Drupal templates, making it ideal for various content management systems The software includes a responsive grid system to facilitate mobile-friendly web design and offers numerous tools for developing mobile applications, including the ability to create native apps for iOS and Android devices.
Dreamweaver CC chỉ khả dụng khi đăng ký Adobe Creative Cloud theo gói hàng tháng hoặc hàng năm, giúp người dùng truy cập vào phiên bản mới nhất của phần mềm cùng với 100GB dung lượng lưu trữ đám mây cho các tệp, portfolio và phông chữ cao cấp Gói đăng ký này còn cung cấp các công cụ truyền thông xã hội và các tài nguyên cao cấp, phù hợp cho các nhà thiết kế web chuyên nghiệp Ngoài ra, Dreamweaver CC còn được tích hợp trong gói Tất cả Ứng dụng của Adobe Creative Cloud, bao gồm hơn 20 ứng dụng nổi bật như Photoshop CC, Illustrator CC và Adobe XD CC, mang đến giải pháp toàn diện để sáng tạo nội dung đa phương tiện.
Thư viện JQUERY
jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với phương châm: Viết ít hơn, làm nhiều hơn.
jQuery giúp thực hiện nhiều nhiệm vụ phức tạp trong lập trình web một cách dễ dàng hơn, giảm thiểu số lượng mã JavaScript cần viết Thư viện này hỗ trợ các chức năng như gọi AJAX để kết nối với máy chủ tự động mà không làm tải lại trang web, cũng như thao tác với mô hình DOM để chỉnh sửa nội dung trang một cách linh hoạt Với khả năng tương thích với nhiều trình duyệt, kể cả Internet Explorer 6.0, jQuery đã trở thành thư viện JavaScript phổ biến nhất được sử dụng rộng rãi để xây dựng ứng dụng website Nhiều công ty lớn như Google, Microsoft, IBM và Netflix đã tích hợp jQuery vào dự án của mình để đảm bảo hiệu quả và tính linh hoạt của các trang web.
PHÂN TÍCH VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU
Biểu đồ Use Case
Khách hàng ở đây là những người truy cập vào website để mua hàng.
Admin là người có quyền truy cập toàn diện vào hệ thống, cho phép sử dụng tất cả các chức năng của website Họ điều khiển và kiểm soát mọi hoạt động của trang web để đảm bảo hoạt động hiệu quả và an toàn Vai trò của admin rất quan trọng trong việc quản lý nội dung, bảo trì hệ thống và đảm bảo vận hành trơn tru của website.
Bảng 1 Danh sách các Actor
1 Đăng nhập Use case này mô tả chức năng đăng nhập vào hệ thống của người dùng.
2 Đăng ký Use case này mô tả chức năng đăng ký tài khoản của người dùng
3 Đặt mua Use case này mô tả chức năng đặt mua sản phẩm tại website của người dùng.
4 Thanh toán Use case này mô tả chức năng thanh toán tiền của người dùng.
5 Xem thông tin sản phẩm
Use case này mô tả chức năng xem thông tin sản phẩm có trên website
Use case này mô tả chức năng tìm kiếm các sản phẩm trên website c.
Bảng 2 Danh sách các Usecase 1.1 Biểu đồ Use Case mức tổng quát
- Đối tượng sử dụng bao gồm: khách hàng.
- Use case này mô tả các bước đăng nhập của các khách hàng vào hệ thống.
Hệ thống yêu cầu khách hàng cung cấp thông tin đăng nhập gồm: tên đăng nhập và mật khẩu.
Khách hàng nhập xong thông tin đăng nhập và click nút đăng nhập.
Hệ thống kiểm tra thông tin đăng nhập và thông báo thành công hay thất bại cho khách
Use Case này mô tả quá trình đăng ký tài khoản cho khách hàng, cho phép Người dùng mới hoàn tất việc đăng ký để có thể đăng nhập vào website Sau khi đăng ký thành công, khách hàng có thể truy cập hệ thống, duyệt sản phẩm và thực hiện mua hàng dễ dàng Việc đăng ký tài khoản là bước quan trọng để nâng cao trải nghiệm mua sắm trực tuyến, đảm bảo an toàn và thuận tiện cho khách hàng khi thao tác trên website.
Dòng sự kiện chính + Người dùng chọn chức năng đăng ký từ trang chủ của website.
+ Trang chủ sẽ mở đến trang đăng ký.
+ Người dùng nhập đầy đủ thông tin tài khoản và thông tin cá nhân.
+ Hệ thống xác nhận thông tin và lưu lại.
- Trạng thái hệ thống sau khi thực hiện Use Case
Trường hợp đăng ký thành công: hệ thống hiển thị trang đăng nhập để người dùng có thể đăng nhập vào website.
Trường hợp đăng ký thất bại: Hệ thống đưa ra thông báo đăng ký không thành công.
Use Case chi tiết sản phẩm
Use Case này giúp khách hàng xem thông tin chi tiết về các sản phẩm trên website một cách dễ dàng Sau khi truy cập vào trang web, khách hàng có thể nhanh chóng khám phá các sản phẩm có sẵn và nắm bắt các thông tin cần thiết Chức năng xem thông tin sản phẩm giúp nâng cao trải nghiệm người dùng và tăng khả năng tương tác với khách hàng trên nền tảng trực tuyến.
Dòng sự kiện chính+ Khách hảng truy cập vào website và nhấn chọn sản phẩm.
+ Trang chủ sẽ mở đến trang chi tiết sản phẩm + Khách hàng sẽ xem thông tin sản phẩm.
Use Case này cho phép khách hàng thực hiện chức năng đặt mua sản phẩm dễ dàng và thuận tiện Sau khi truy cập vào website và xem thông tin chi tiết về sản phẩm, khách hàng có thể nhanh chóng đặt mua sản phẩm mình chọn, nâng cao trải nghiệm mua sắm trực tuyến.
1) Khách hàng chọn chức năng xem thông tin chi tiết của sản phẩm.
2) Trang chủ sẽ mở đến trang thông tin chi tiết của sản phẩm.
3) Khách hàng xem và nhấn vào nút “Cho vào giỏ hàng”.
4) Hệ thống xác nhận thông tin và lưu lại.
5) Hiển thị trang thông tin sản phẩm.
Use case này giúp thực hiện chức năng thanh toán cho các sản phẩm đã đặt mua, đảm bảo khách hàng có thể hoàn tất quá trình thanh toán dễ dàng sau khi chọn mua hàng Sau khi đặt hàng thành công, khách hàng có thể thấy giỏ hàng chứa một hoặc nhiều sản phẩm, và để nhận được các sản phẩm này, khách cần chọn Use Case thanh toán này để hoàn tất giao dịch Việc sử dụng Use Case thanh toán đảm bảo quá trình mua hàng trở nên thuận tiện và an toàn, giúp khách hàng nhanh chóng nhận được sản phẩm đã chọn.
1) Khách chọn chức năng đặt mua.
2) Trang chủ sẽ mở đến trang giỏ hàng của khách.
3) Khach hàng xem và nhấn vào nút “Thanh toán”.
4) Hệ thống xác nhận thông tin và hiển thị trang thanh toán.
5) Khách hàng nhập đầy đủ thông tin.
6) Hệ thống đưa ra thông báo và quay trở lại trang giỏ hàng.
Use Case này giúp khách hàng dễ dàng tìm kiếm sản phẩm mong muốn nhanh chóng và chính xác, nâng cao trải nghiệm mua sắm trực tuyến Chức năng tìm kiếm sản phẩm tối ưu giúp khách hàng tiết kiệm thời gian và nâng cao khả năng tiếp cận các mặt hàng phù hợp Việc tích hợp chức năng tìm kiếm hiệu quả không những cải thiện trải nghiệm người dùng mà còn thúc đẩy doanh số bán hàng, góp phần phát triển kinh doanh một cách bền vững.
1) Khách hàng chọn chức năng tìm kiếm từ trang chủ
2) Khách nhập thông tin tìm kiếm.
3) Hệ thống xác nhận thông tin và thực hiện tìm kiếm.
4) Hệ thống trả về thông tin tìm kiếm.
Biểu đồ tuần tự (Sequence Diagram)
2.1 Biểu đồ tuần tự Đăng nhập
Hình 4 Biểu đồ tuần tự đăng nhập
2.2 Biểu đồ tuần tự đăng kí
Hình 5 Biểu đồ tuần tự chức năng đăng kí
2.3 Biểu đồ tuần tự đặt hàng
Hình 6 Biểu đồ tuần tự đặt hàng
2.4 Biểu đồ tuần tự quản lý sản phẩm
Hình 7 Biểu đồ tuần tự quản lý sản phẩm
2.5 Biểu đồ tuần tự chi tiết sản phẩm
Hình 8 Biểu đồ tuần tự chi tiết sản phẩm
2.6 Biểu đồ tuần tự tìm kiếm
Hình 9 Biểu đồ tuần tự tìm kiếm
Lược đồ quan hệ thực thể
Hình 10 Lược đồ quan hệ thực thể
Các bảng CSDL
Hình 15 CSDL Loại Sản Phẩm
XÂY DỰNG WEBSITE
Đặt tả giao diện và thủ tục
1.1 Đặt tả giao diện trang chủ
- Tên biểu mẫu: Đăng nhập hệ thống quản lý danh mục
Người dùng có thể dễ dàng khám phá toàn diện về trang web, bao gồm đầy đủ các tính năng và danh mục sản phẩm Họ có thể lựa chọn trực tiếp các sản phẩm yêu thích và trải nghiệm các chức năng đặc biệt của trang web để tối ưu hóa trải nghiệm mua sắm của mình.
- Nhiệm vụ: Đưa người dùng đến giao diện chính của web với đầy đủ các sản phẩm.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 16 Giao diện trang chủ
1.2 Đặt tả giao diện trang đăng ký
- Tên biểu mẫu: Đăng nhập hệ thống trang đăng ký
Người dùng muốn mua sản phẩm cần đăng ký tài khoản để xác thực và kiểm tra danh tính Quá trình đăng ký yêu cầu người dùng nhập thông tin đầy đủ và chính xác nhằm đảm bảo an toàn và xác thực người mua Việc này giúp tạo sự tin tưởng và thuận tiện trong quá trình giao dịch.
- Nhiệm vụ: Giúp người dùng đăng ký tài khoản để quản lý sản phẩm của mình.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 17 Giao diện trang đăng ký
1.3 Đặt tả giao diện trang đăng nhập
- Tên biểu mẫu: Đăng nhập hệ thống trang đăng nhập
Sau khi đăng ký tài khoản thành công, người dùng cần đăng nhập vào hệ thống để trở thành thành viên chính thức của website Việc trở thành thành viên sẽ giúp bạn tận hưởng nhiều ưu đãi hấp dẫn, hỗ trợ trải nghiệm mua sắm hoặc sử dụng dịch vụ diễn ra thuận tiện và tiện lợi hơn.
- Nhiệm vụ: Giúp người dùng đăng nhập vào tài khoản của mình để quản lý sản phẩm.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 18 Giao diện trang đăng nhập
1.4 Đặt tả giao diện chi tiết sản phẩm
Giao diện chi tiết sản phẩm
- Tên biểu mẫu: Đăng nhập hệ thống quản lý chi tiết sản phẩm
Sau khi người dùng chọn một sản phẩm bất kỳ, trang sẽ hiển thị thông tin chi tiết của sản phẩm để khách hàng dễ dàng xem xét Nếu thấy ưng ý, khách hàng có thể thêm sản phẩm vào giỏ hàng để mua sắm thuận tiện Quá trình này giúp nâng cao trải nghiệm mua sắm trực tuyến và tối ưu hóa khả năng chuyển đổi bán hàng.
Nhiệm vụ chính của bước này là giúp khách hàng dễ dàng đưa ra quyết định mua hàng, đảm bảo họ hài lòng về sản phẩm Trong phần chi tiết sản phẩm, người dùng sẽ tiếp nhận đầy đủ các thông tin cần thiết như thời gian bảo hành, số lượt đánh giá, và các đặc điểm nổi bật của sản phẩm Việc cung cấp thông tin rõ ràng và chính xác không chỉ nâng cao trải nghiệm khách hàng mà còn tối ưu hóa SEO với các từ khóa liên quan đến sản phẩm và dịch vụ.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 19 Giao diện chi tiết sản phẩm
1.5 Đặt tả giao diện giỏ hàng
- Tên biểu mẫu: Đăng nhập hệ thống quản lý giỏ hàng
- Sau khi lựa chọn được sản phẩm yêu thích thì người dùng chỉ cần nhấn vào thanh toán để mua sản phẩm.
- Nhiệm vụ: Giúp người dùng thanh toán sản phẩm.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 20 Giao diện giỏ hàng
1.6 Đặt tả giao diện danh mục
Giao diện danh mục sản phẩm
- Tên biểu mẫu: Đăng nhập hệ thống quản lý danh mục sản phẩm
- Người sử dụng: Người dùng có thể trực tiếp lựa chọn tên sản phẩm
26 yêu thích mà không cần phải đi lòng vòng tìm kiếm sản phẩm.
- Nhiệm vụ: Lựa chọn thương hiệu sản phẩm ví dụ:Rau, Củ Quả , Trà.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 21 Giao diện danh mục
1.7 Đặt tả giao diện Xuất Xứ
Giao diện danh mục thương hiệu mặt hàng
- Tên biểu mẫu: Đăng nhập hệ thống quản lý danh mục các thương hiệu
- Người sử dụng: Giúp người dùng có thể biết mặt hàng đó của Vườn Rau Nào
- Nhiệm vụ: Lựa chọn thương hiệu sản phẩm ví dụ: Vườn rau Đà lạt…
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 22 Giao diện Xuất Xứ
1.8 Đặt tả giao diện Sản Phẩm Mới
Giao diện sản phẩm Mới
- Tên biểu mẫu: Sản phẩm Mới
- Người sử dụng: Người dùng có thể lựa chọn các mặt hàng Mới Cập Nhật.
- Nhiệm vụ: Giúp người dùng lựa chọn được sản phẩm Mới Nhất.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 23Giao diện sản phẩm Mớ
2 Một số giao diện trang Admin
2.1 Đặt tả giao diện trang quản lý sản phẩm
Giao diện quản lý sản phẩm
- Tên biểu mẫu: Đăng nhập hệ thống quản lý sản phẩm.
- Admin: Ở đây người quản lý có thể quản lý sản phẩm trực tiếp không cần phải thông qua sql để thêm xóa sửa sản phẩm.
- Nhiệm vụ: Quản lý thêm nhập xóa sửa sản phẩm.
- Hệ thống: ASP.NET MVC,Bootstrap, JQuery, Ajax, Javascript
Hình 24 Giao diện trang sản phẩm
2.2 Đặt tả giao diện trang Chỉnh Sửa Sản Phẩm
- Admin: Có thể chỉnh sửa lại thông tin sản phẩm tùy ý
- Nhiệm vụ: Quản lý Sản Phẩm.
- Hệ thống: ASP.NET MVC, JQuery, Ajax, Javascript
Hình 25 Giao Diện Chỉnh Sửa Sản Phẩm
2.3 Giao Diện Thêm Sản Phẩm
- Admin: Ở đây admin có thể thêm mới sản phẩm cho shop
- Nhiệm vụ: Thêm Sản Phẩm.
Hình 25 Giao diện Thêm Mới Sản Phẩm