Xây dựng website phục vụ hoạt động kinh doanh của SPA

CƠ SỞ LÝ THUYẾT

ASP.NET MVC

1.1 Giới thiệu về ASP.NET MVC

1.1.1 ASP.NET MVC là gì ?

Asp.Net MVC là một framework dựa trên Net Framework, được thiết kế để phát triển ứng dụng web động Trước khi Asp.Net MVC ra đời, các lập trình viên thường sử dụng công nghệ Asp.Net Web Form để xây dựng các ứng dụng web.

1.1.2 Xây dựng theo mô hình MVC

Asp.Net MVC là một framework phát triển ứng dụng dựa trên mẫu thiết kế MVC, cho phép người dùng xây dựng các ứng dụng phần mềm hiệu quả Mẫu MVC chia ứng dụng thành ba thành phần chính: models (mô hình), views (giao diện) và controllers (bộ điều khiển), mỗi thành phần đảm nhiệm một vai trò riêng và tương tác lẫn nhau, giúp tối ưu hóa quy trình phát triển.

Hình 1.1: Mẫu thiết kế MVC

Các đối tượng Model là phần quan trọng trong ứng dụng, thiết lập logic cho dữ liệu Chúng thường lấy và lưu trữ trạng thái trong cơ sở dữ liệu (CSDL) Ví dụ, đối tượng Employee sẽ truy xuất, thao tác và cập nhật dữ liệu trong bảng Employees của SQL Server Trong các ứng dụng nhỏ, model có thể chỉ là khái niệm phân biệt, không cần cài đặt thực tế Nếu ứng dụng chỉ đọc dữ liệu từ CSDL và gửi đến view, thì không cần tầng model và các lớp liên quan; dữ liệu được xem như một đối tượng model.

Views là các thành phần hiển thị giao diện người dùng (UI), thường được tạo ra dựa trên thông tin từ dữ liệu model Ví dụ, một view dùng để cập nhật bảng Employees sẽ hiển thị các hộp văn bản, danh sách thả xuống và các ô chọn dựa trên trạng thái hiện tại của một đối tượng Employee.

Controller là thành phần quản lý tương tác người dùng trong ứng dụng MVC, chịu trách nhiệm xử lý dữ liệu người dùng và chọn view để hiển thị giao diện Trong mô hình này, view chỉ dùng để hiển thị thông tin, trong khi controller quản lý và phản hồi các tương tác của người dùng Cụ thể, controller sẽ xử lý dữ liệu người dùng gửi lên và chuyển các giá trị này đến model, từ đó model sẽ truy xuất dữ liệu từ cơ sở dữ liệu dựa trên các giá trị đã nhận.

1.1.3 Lợi ích khi xây dựng ứng dụng web dựa trên mô hình MVC

- Dễ dàng quản lý sự phức tạp của ứng dụng bằng cách chia ứng dụng thành ba thành phần model, view, controller

- Hỗ trợ tốt hơn cho mô hình phát triển ứng dụng hướng kiểm thử (TDD)

Hỗ trợ mạnh mẽ cho các ứng dụng phát triển bởi đội ngũ lập trình viên đông đảo và thiết kế, đồng thời vẫn đảm bảo quản lý hiệu quả các tính năng của ứng dụng.

1.2 Kiến trúc ứng dụng Asp.Net MVC

1.2.1 Giao tiếp trong kiến trúc Asp.Net MVC

Các thành phần cơ bản của ứng dụng Asp.Net MVC bao gồm :

Các thành phần trong Asp.Net MVC tương tác với nhau để xử lý các yêu cầu của ứng dụng Quá trình này thường bao gồm một chuỗi các xử lý, mỗi xử lý được đảm nhiệm bởi một component trong Asp.Net.

1 Trình duyệt gửi yêu cầu của ứng dụng Asp.Net MVC

2 MVC Engine chuyển yêu cầu tới cho Routing engine (Bộ điều hướng)

3 Routing engine kiểm tra cấu hình điều hướng (route configuration) của ứng dụng nhằm chuyển đến các controller phù hợp với yêu cầu

4 Khi Controller được tìm thấy, control này sẽ được thực thi

5 Nếu Controller 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 và MVC Engine sẽ thông báo lỗi cho trình duyệt

6 Controller giao tiếp với model, tầng Model đại diện cho các Entity bên trong hệ thống, Controller làm việc với tầng model để lấy thông tin cần cho người dùng

7 Controller yêu cầu View engine hiển thị thông tin dựa trên dữ liệu của tầng model

8 View engine trả kết quả cho controller

9 Controller gửi kết quả cho trình duyệt thông qua giao thức Http

Hình 1.2: Giao tiếp trong kiến trúc Asp.Net MVC

1.2.2 Các vấn đề cơ bản về Url và Routing

Hầu hết các Web Framework như Asp.net Web Form, jsp … đều ánh xạ url vào 1 file được lưu trữ trên ổ đĩa

Khi truy cập vào địa chỉ URL http://abc.com/default.aspx, hệ thống sẽ tự động chuyển hướng đến tệp default.aspx nằm trên ổ đĩa vật lý, chẳng hạn như D:\webroot\default.aspx.

Asp.net MVC hoạt động khác biệt so với các phương pháp truyền thống, khi nó không ánh xạ trực tiếp các tệp trên ổ đĩa mà thay vào đó ánh xạ trực tiếp vào các lớp, được gọi là controller.

Khi truy cập địa chỉ URL http://abc.com/admin, hệ thống sẽ chuyển hướng đến controller có tên là admin, và phương thức hành động mặc định trong controller này là Index sẽ được kích hoạt.

1.3 Những ưu điểm mà ASP.Net MVC mạng lại cho chúng ta

Mô hình MVC trong ASP.Net MVC giúp tách biệt các tầng trong lập trình web, từ đó tối ưu hóa ứng dụng và đơn giản hóa quy trình viết code cũng như thiết kế giao diện.

Giao diện trong ASP.Net MVC ứng dụng công nghệ thiết kế web như HTML và CSS, giúp việc thiết kế trở nên đơn giản và mang lại sự linh hoạt cho các nhà thiết kế.

• ASP.Net MVC không sử dụng view state vì vậy trang web không bị tăng kích thước do đó hiệu năng hoạt động không bị bị giảm

• ASP.Net MVC đã khắc phục được các nhược điểm của web forms vì vậy web forms hiện nay không còn được dùng phổ biến nữa.

SQL SERVER

2.1 Giới thiệu về SQL Sever

SQL Server, hay còn gọi là Microsoft SQL Server (MS SQL Server), là phần mềm do Microsoft phát triển, được sử dụng để lưu trữ dữ liệu theo chuẩn RDBMS Đây cũng là một hệ quản trị cơ sở dữ liệu quan hệ đối tượng.

Hình 2 1: Minh họa SQL Server

SQL Server cơ bản sử dụng cấu trúc bảng biểu để kết nối các phần tử dữ liệu liên quan, giúp loại bỏ việc lưu trữ dữ liệu ở nhiều vị trí Mô hình quan hệ cung cấp tham chiếu và ràng buộc toàn vẹn, duy trì độ chính xác của dữ liệu và thúc đẩy tuân thủ các nguyên tắc về tính nhất quán, tính độc lập và độ tin cậy.

Hình 2 2: Cấu trúc SQL Server

Thành phần chính của Microsoft SQL Server là SQL Server Database Engine, công cụ này quản lý việc lưu trữ, xử lý và bảo mật dữ liệu Nó bao gồm một công cụ quan hệ để xử lý các lệnh và truy vấn, cùng với một công cụ lưu trữ quản lý các tệp, bảng, trang, chỉ mục, bộ đệm dữ liệu và giao dịch cơ sở dữ liệu Database Engine cũng khởi tạo và xử lý các nhiệm vụ, trigger, trình xem và các đối tượng dữ liệu lưu trữ khác.

SQL Server cung cấp các công cụ quản lý toàn diện, bao gồm giao diện GUI và ngôn ngữ truy vấn SQL Điểm mạnh của SQL Server là sự tích hợp hoàn hảo với nhiều nền tảng của Microsoft như ASP.NET và C# trong việc phát triển Winform, cho phép hoạt động độc lập hiệu quả.

2.2 Tại sao lại sử dụng SQL trong thiết kế Web

- Cho phép tạo nhiều cơ sở dữ liệu

- Duy trì lưu trữ bền vững

- Phân tích dữ liệu bằng SSAS - SQL Server Analysis Services

- Tạo được báo cáo bằng SSRS - SQL Server Reporting Services

- Thực hiện quá trình ETL (Extract-Transform-Load) bằng SSIS - SQL Server Integration Services.

Thanh toán qua Momo

API nền tảng thanh toán MoMo là giải pháp tối ưu cho các doanh nghiệp, giúp khách hàng dễ dàng thanh toán dịch vụ thông qua tài khoản Ví MoMo trên nhiều nền tảng như website máy tính, website di động, ứng dụng di động, POS, thanh toán hóa đơn và web trong ứng dụng MoMo.

3.1 Các phương thức thanh toán

- Cổng thanh toán MoMo (All In One): Áp dụng đối tác có thanh toán trên nền tảng Website, Mobile, Smart TV,

- Thanh toán App-In-App: Áp dụng cho đối tác có ứng dụng di động (android/ios) muốn mở trực tiếp ứng dụng MoMo để thanh toán.

Thanh toán POS là phương thức áp dụng cho các đối tác có hệ thống bán hàng sử dụng máy POS Nhân viên thu ngân sẽ sử dụng máy quét để quét "MÃ THANH TOÁN" trên ứng dụng MoMo, giúp thực hiện giao dịch thanh toán một cách nhanh chóng và tiện lợi.

- Thanh toán QR Code: Đối tác tạo QR code theo định dạng MoMo cung cấp, khách hàng chỉ cần dùng app MoMo để quét và thanh toán

3.2 Các bước cơ bản để tích hợp với MoMo

Để bắt đầu, bạn cần đăng ký tài khoản doanh nghiệp bằng cách cung cấp đầy đủ thông tin Lưu ý rằng trạng thái ban đầu của doanh nghiệp sẽ là chưa xác thực, và thông tin tích hợp mặc định sẽ được thiết lập trong môi trường Test.

- Tham khảo và lựa chọn phương thức thanh toán áp dụng cho dịch vụ của đơn vị kinh doanh

- Tiến hành tích hợp theo tài liệu của từng phương thức thanh toán

- Đơn vị tiến hành kiểm thử phần mềm, tham khảo các testcase của MoMo cung cấp để kiểm tra các lỗi phổ biến trong quá trình thanh toán

- Sau khi đơn vị kinh doanh hoàn thành tích hợp và kiểm thử, MoMo sẽ xác thực dịch vụ của bạn trên môi trường test trước khi lên production

- Sau khi được xác nhận, tài khoản doanh nghiệp của bạn sẽ được chuyển sang trạng thái đã xác thực

- Thay đổi các thông tin tích hợp theo môi trường production

- Triển khai dịch vụ thanh toán cho khách hàng

PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG

Khảo sát hiện trạng

Ngày nay, sự phát triển mạnh mẽ của công nghệ thông tin đã thúc đẩy nhu cầu dịch vụ và mua bán hàng hóa gia tăng trong nền kinh tế toàn cầu hóa Các công ty công nghệ hàng đầu đang cải thiện giải pháp và sản phẩm để thúc đẩy thương mại điện tử, giúp khách hàng dễ dàng đặt lịch dịch vụ và mua sắm trực tuyến chỉ với vài cú click chuột Điều này không chỉ tiết kiệm thời gian mà còn mang lại sự tiện lợi cho người tiêu dùng Nhằm góp phần vào sự phát triển của thương mại điện tử tại Việt Nam, nhóm chúng tôi đã nghiên cứu và xây dựng "Website phục vụ hoạt động cho spa", cung cấp các dịch vụ và sản phẩm chăm sóc khách hàng hiệu quả.

Trung tâm spa cam kết cung cấp dịch vụ và sản phẩm với giá cả cạnh tranh nhất trên thị trường, đồng thời đảm bảo chất lượng dịch vụ Uy tín với khách hàng là phương châm hoạt động và phát triển thương hiệu của trung tâm Công ty cũng tuân thủ nghiêm ngặt các quy định của nhà nước về kinh doanh online, bao gồm quy trình phát triển website, đăng ký các chứng chỉ cần thiết và thực hiện nghĩa vụ thuế thu nhập.

Tiếp theo, nhóm chúng em sẽ tiến hành khảo sát ba website spa phổ biến nhất Việt Nam được nhiều người sử dụng nhất hiện nay

Website Thucucclinics bao gồm trang chủ và nhiều danh mục con, cung cấp thông tin về các sự kiện khuyến mãi, dịch vụ làm đẹp và tin tức liên quan Ngoài ra, trang còn có khung tìm kiếm từ khóa giúp người dùng dễ dàng tìm kiếm thông tin cần thiết.

Website Seoulspa.vn có giao diện thân thiện với người dùng, bao gồm trang chủ và các danh mục dịch vụ, sản phẩm đa dạng Đặc biệt, website còn tích hợp chức năng chăm sóc khách hàng và chatbot, giúp nâng cao trải nghiệm người dùng.

Website boclinic có trang chủ, các danh mục dịch vụ, sản phẩm, có chatbot, hình ảnh, video và đặt lịch online

Sau khi khảo sát ba website trên thì nhóm em có khảo sát thêm một vài website khác cũng khá nổi tiếng ở Việt Nam như:

Qua khảo sát các website, chúng tôi nhận thấy hầu hết đều cung cấp đầy đủ thông tin về dịch vụ cho khách hàng Tuy nhiên, vẫn còn nhiều website thiếu tính năng đặt hàng sản phẩm và đặt lịch dịch vụ online, điều này cần được cải thiện để nâng cao trải nghiệm khách hàng.

Hạn chế trong việc đặt lịch theo thời gian mong muốn có thể gây khó khăn cho khách hàng và ảnh hưởng đáng kể đến lợi nhuận của nhà kinh doanh nếu không có tính năng quảng cáo và bán sản phẩm online Bên cạnh đó, giao diện của một số website hiện tại còn sơ sài, điều này ảnh hưởng nghiêm trọng đến trải nghiệm của người dùng khi tìm kiếm thông tin về Spa.

Để xây dựng một trang web spa hiệu quả, cần phân tích yêu cầu từ cả người dùng và nhà kinh doanh Người dùng mong muốn trang web ổn định, dễ sử dụng, thân thiện, ít quảng cáo, cho phép đăng ký thành viên và bảo mật quyền riêng tư, đồng thời đảm bảo thanh toán online an toàn và thông tin sản phẩm chính xác Trong khi đó, nhà kinh doanh cần đảm bảo hệ thống hoạt động liên tục, cập nhật thông tin sản phẩm thường xuyên, quản lý đơn đặt hàng chặt chẽ và bảo mật thông tin khách hàng, cũng như thông báo kịp thời các chương trình khuyến mãi Việc giải quyết những vấn đề này là rất quan trọng để xây dựng một trung tâm spa thành công.

Chọn vị trí mở trung tâm spa là yếu tố quyết định thành công hay thất bại của chủ spa Địa điểm cần phải thuận lợi để thu hồi vốn đầu tư và sinh lợi nhuận, vì vậy nên chọn những nơi có lưu lượng người qua lại cao và tập trung nhiều khách hàng mục tiêu.

Bố trí spa không chỉ cần chọn vị trí hợp lý mà còn phải thiết kế sao cho thu hút sự chú ý của khách hàng Việc xây dựng không gian phù hợp với quy mô của spa và trang trí để thể hiện đặc điểm đặc trưng, thương hiệu của trung tâm là rất quan trọng.

Sắp xếp sản phẩm trong spa cần dựa vào không gian hiện có để tối ưu hóa việc trưng bày, đồng thời đảm bảo dễ dàng quan sát và thuận tiện trong việc thêm vào hoặc lấy ra sản phẩm.

Đầu tư vốn cho một spa bao gồm chi phí thuê hoặc mua địa điểm, trang trí, thuê nhân viên và mua sắm sản phẩm mới, đòi hỏi sự cân nhắc và chi tiêu hợp lý từ chủ sở hữu Bên cạnh đó, việc đầu tư thời gian và công sức cũng rất quan trọng, vì chủ spa cần phải xây dựng và vận hành cơ sở, đồng thời cập nhật thông tin về các sản phẩm và dịch vụ mới để thu hút khách hàng.

Khoảng cách địa lý có thể là một rào cản lớn đối với khách hàng ở xa, khiến họ khó tiếp cận dịch vụ và sản phẩm Điều này không chỉ làm tăng thời gian di chuyển mà còn phát sinh thêm chi phí cho việc đến spa để giao dịch.

Khách hàng tại spa thường gặp khó khăn khi muốn đóng góp ý kiến mà không muốn trực tiếp giao tiếp, đặc biệt khi không có hòm thư góp ý để họ thể hiện ý kiến của mình.

Kinh doanh sản phẩm chăm sóc sắc đẹp yêu cầu sự đầu tư kỹ lưỡng, đặc biệt khi nhiều khách hàng không có thời gian đến spa Họ thường lựa chọn đặt hàng sản phẩm làm đẹp qua website, điều này không chỉ tạo ra sự tương tác tốt hơn với khách hàng mà còn giúp nhà kinh doanh gia tăng lợi nhuận từ việc bán được nhiều sản phẩm hơn.

Xây dựng hệ thống đặt dịch vụ spa trực tuyến cho phép khách hàng dễ dàng chọn thời gian mong muốn mà không cần gọi điện, giúp tiết kiệm thời gian và mang lại sự thoải mái tối đa cho người dùng.

Phân tích hệ thống

STT Chức năng Mô tả

1 Đặt hàng Chức năng cho phép khách hàng duyệt sản phẩm trên trang web và nhấn nút đặt hàng sản phẩm đã chọn

Giỏ hàng cho phép khách hàng xem và điều chỉnh các mặt hàng đã chọn mua, đồng thời hiển thị tổng giá sản phẩm mà khách hàng đã đặt.

3 Blog Website có một số hình ảnh, khi click vào hình ảnh đó thì dẫn đến trang Blog

4 Quản lý đơn hàng, lịch hẹn Khách hàng có thể quản lí được đơn hàng, lịch hẹn đã đặt sau khi đăng nhập

5 Đăng ký, đăng nhập thành viên Cho phép khách hàng đăng kí, đăng nhập tài khoản

6 Chỉnh sửa thông tin cá nhân

Khách hàng có thể chỉnh sửa được thông tin cá nhân sau khi đăng nhập

7 Liên hệ Khách hàng có thể liên hệ, nhắn tin với cửa hàng thông qua Email

8 Đặt lịch Khách hàng có thể đặt lịch hẹn cho các dịch vụ mà mình đã chọn

Bảng 2 1 Chức năng phía Frontend

Trang quản trị nội dung cho phép người quản trị quản lý tính năng đặt hàng, giúp khách hàng dễ dàng duyệt sản phẩm trên website Khi khách hàng gửi thông tin đặt hàng, sản phẩm sẽ được tự động thêm vào giỏ hàng Thông tin đầu vào cần thiết là chi tiết về sản phẩm mà khách hàng mong muốn mua.

Khi khách hàng chọn sản phẩm muốn mua, nếu đây là lần đầu tiên họ chọn mặt hàng đó, giỏ hàng sẽ tự động thêm sản phẩm với số lượng là 1 Nếu sản phẩm đã có trong giỏ hàng, số lượng của mặt hàng sẽ được tăng lên.

1 Đầu ra: Thông tin của mặt hàng đó lưu trong giỏ hàng

Giỏ hàng là tính năng cho phép khách hàng quản lý đơn hàng của mình bằng cách xem, điều chỉnh, thêm hoặc xóa các mặt hàng đã chọn Nó cũng có chức năng tính tổng giá trị của đơn hàng Đầu vào cho giỏ hàng bao gồm thông tin về các mặt hàng mà khách hàng đã đặt mua và số lượng sản phẩm mong muốn.

Khách hàng có quyền điều chỉnh số lượng mặt hàng mong muốn mua Khi khách hàng thay đổi số lượng và nhấn cập nhật, hệ thống cần tự động cập nhật lại số lượng mặt hàng đó và tính toán lại tổng giá tương ứng.

Trên website, người dùng có thể nhấp vào một số hình ảnh để được dẫn đến trang Blog Để trở thành thành viên, khách hàng cần đăng ký hoặc đăng nhập, với thông tin được hiển thị rõ ràng để nhập vào Dữ liệu đầu vào bao gồm thông tin cá nhân mà khách hàng cung cấp.

Hệ thống sẽ cung cấp một ô trống để khách hàng nhập thông tin của mình, sau đó sẽ trả về kết quả là thông tin chi tiết về khách hàng.

Quản lý đơn hàng: Sau khi đăng nhập thành công, khách hàng có thể theo dõi tình trạng đơn hàng của mình, bao gồm việc xác nhận đơn hàng và kiểm tra xem đơn hàng đã được giao thành công hay chưa.

Khách hàng có thể dễ dàng chỉnh sửa thông tin cá nhân như địa chỉ, ngày sinh và giới tính Để thực hiện việc này, khách hàng chỉ cần cung cấp thông tin cá nhân mà họ muốn thay đổi.

Khi khách hàng thực hiện việc sửa đổi thông tin, hệ thống sẽ tiến hành xử lý và cập nhật dữ liệu từ cơ sở dữ liệu Sau đó, thông tin đã được chỉnh sửa sẽ được gửi lại cho người dùng.

Khách hàng có thể dễ dàng liên hệ với cửa hàng thông qua phần "Contact" trên website, nơi họ có thể để lại tin nhắn và email để nhân viên phản hồi Bên cạnh đó, website cũng cho phép khách hàng đặt lịch cho các dịch vụ, và khi việc đặt lịch thành công, khách hàng sẽ nhận được thông báo về ngày giờ hẹn Để đặt lịch, khách hàng cần cung cấp thông tin về dịch vụ mà họ muốn sử dụng.

Khi khách hàng chọn dịch vụ để đặt lịch hẹn, thông tin về ngày giờ hẹn sẽ được gửi về hệ thống Hệ thống sẽ lưu trữ thông tin này và tạo ra một lịch hẹn cho khách hàng Kết quả là thông tin lịch hẹn đã được xác nhận với khách hàng.

STT Chức năng Mô tả

Quản lý sản phẩm cho phép người quản trị tải lên hình ảnh, nhập thông tin mô tả tính năng, giá cả và số lượng sản phẩm một cách dễ dàng và hiệu quả.

2 Quản lý danh mục sản phẩm Quản lý thông tin danh mục sản phẩm bao gồm các chức năng thêm, xóa sửa danh mục sản phẩm

3 Quản lý đơn đặt hàng

Thống kê đơn đặt hàng được thực hiện bởi admin và nhân viên, cho phép theo dõi tình trạng đơn hàng như: Đặt hàng thành công, Thanh toán thành công, Hàng đang giao, Đã thanh toán và nhận hàng, Hủy đơn hàng, cùng với Chi tiết đơn đặt hàng.

4 Chi tiết đơn đặt hàng

Hiển thị thông tin chi tiết của đơn đặt hàng bao gồm thông tin khách hàng, sản phẩm trong đơn và ghi chú từ người mua.

Thêm mới, sửa, xóa thông tin khách hàng

Thêm mới, sửa, xóa thông tin nhân viên

Mô hình hóa yêu cầu

Hình 3.4 Lược đồ chức năng Use case

Người quản trị đăng nhập vào hệ thống

Pre-conditions Người quản trị đã có tài khoản trong hệ thống, có kết nối

Khi người dùng đăng nhập thành công, hệ thống sẽ xác thực thông tin và hiển thị dữ liệu cá nhân của họ Ngược lại, nếu đăng nhập không thành công, người dùng sẽ không thể truy cập vào hệ thống.

Use case bắt đầu khi người dùng click vào ô đăng nhập

1 Hệ thống hiển thị cửa sổ cho người dùng nhập username và password

2 Người dùng nhập username và password

3 Hệ thống kiểm tra trong cơ sở dữ liệu xác thực username và password

4 Hệ thống mở màn hình trang chủ và mở các chức năng được phép truy cập của người dùng

Người dùng nhập sai username hoặc password

=> Hệ thống thông báo lỗi đăng nhập yêu cầu đăng nhập lại

Extension point Hệ thống thông báo lỗi

Bảng 3 1 Use Case Đăng nhập

2.2.2 Use case Quản lý khách hàng

Name Quản lý khách hàng

Brief description Nhân viên hoặc quản trị truy cập trang quản lý khách hàng

Actor(s) Nhân viên, người quản trị

Nhân viên hoặc quản trị viên sẽ tiến hành xem xét thông tin khách hàng Trong trường hợp phát hiện sai sót trong quá trình nhập liệu, nhân viên sẽ thoát ra màn hình chính để điều chỉnh.

Nếu có sai sót, Nhân viên hay Quản trị viên tiến hành sửa, đổi trên form quản lý khách hàng

Use case bắt đầu khi nhân viên click vào trang khách hàng

1 Hệ thống hiển thị trang quản lý khách hàng cho nhân viên

2 Nhân viên tiến hành xem xét thông tin khác hàng

4 Hệ thống lưu thông tin chỉnh sửa xuống cơ sở dữ liệu

5 Thông tin của người quản trị được thay đổi

6 Quay về màn hình trước

Tại bước 3 khi người dùng nhấn cancel

=> Quay về màn hình trước đó

Bảng 3 2 Use case Quản lý khách hàng

3.2.3 Use case Quản lý dịch vụ

Name Quản lý dịch vụ

Quản trị viên, nhân viên truy cập vào trang quản lý dịch vụ

Actor(s) Người quản trị, Nhân viên

Pre-conditions Có kết nối Internet

Post-conditions Thành công: Thông tin dịch vụ thay đổi theo người quản trị Không thành công: Dữ liệu dịch vụ không thay đổi

Use case bắt đầu khi người dùng click vào trang quản lý

1 Hệ thống hiển thị trang quản lý khách hàng cho nhân viên

2 Nhân viên tiến hành xem xét thông tin khác hàng

Bảng 3 3 Use Case Quản lý Dịch vụ

3.2.4 Use case Quản lý sản phẩm

Name Quản lý sản phẩm

Nhân viên hay Quản trị viên truy cập trang quản lý sản phẩm

Actor(s) Người quản trị, nhân viên

Post-conditions Nhân viên tiến hành xem xét thông tin sản phẩm Nếu không có gì sai sót trong nhập liệu, nhân viên thoát ra màn hình chính

Nếu có sai sót, nhân viên báo cho quản trị viên tiến hành sửa đổi trên form sản phẩm

Use case bắt đầu khi người dùng click vào trang quản lý sản phẩm

1 Hệ thống hiển thị trang quản lý sản phẩm

2 Nhân viên xem xét thông tin sản phẩm

3 Quay về màn hình chính

Người quản trị chọn Hủy

Bảng 3 4 Use Case Quản lý sản phẩm

3.2.5 Use case Quản lý nhân viên

Name Quản lý nhân viên

Quản trị viên truy cập vào trang quản lý nhân viên

Post-conditions Thành công: Thông tin nhân viên thay đổi theo người quản trị Không thành công: Dữ liệu dịch vụ không thay đổi

Use case bắt đầu khi người quản trị click vào trang quản lý nhân viên

1 Hệ thống hiển thị trang quản lý nhân viên

2 Quản trị viên tiến hành xem xét thông tin nhân viên

Bảng 3 5 Use Case Quản lý nhân viên

3.2.6 Use case Thêm nhân viên

Quản trị viên truy cập vào form Thêm nhân viên

Sau khi tiếp nhận hồ sơ của các nhân viên mới và tiến hành phỏng vấn, người quản trị sẽ nhập thông tin của nhân viên vào hệ thống và lưu trữ vào cơ sở dữ liệu.

Use case bắt đầu khi người quản trị click vào form Thêm nhân viên

1 Hệ thống hiển thị trang Thêm nhân viên

2 Quản trị viên tiến hành nhập thông tin nhân viên mới

4 Hệ thống lưu thông tin nhân viên xuống cơ sở dữ liệu

Bảng 3 6 Use Case Thêm nhân viên

3.2.7 Use case Thêm khách hàng

Quản trị viên hoặc nhân viên truy cập vào form Thêm khách hàng

Sau khi tiếp nhận hồ sơ của khách hàng mới, người quản trị hoặc nhân viên sẽ tiến hành nhập thông tin của khách hàng và lưu trữ vào cơ sở dữ liệu.

Use case bắt đầu khi người quản trị hoặc nhân viên click vào form Thêm khách hàng

1 Hệ thống hiển thị trang Thêm khác hàng

2 Họ tiến hành nhập thông tin khách hàng mới

4 Hệ thống lưu thông tin khác hàng xuống cơ sở dữ liệu

Người quản trị hoặc Nhân viên chọn Hủy

Bảng 3 7 Use Case Thêm khách hàng

3.2.8 Use case Thêm sản phẩm

Quản trị viên hoặc nhân viên truy cập vào form Thêm sản phẩm

Sau khi tiếp nhận sản phẩm mới, người quản trị hoặc nhân viên sẽ nhập thông tin sản phẩm và lưu trữ vào cơ sở dữ liệu.

Use case bắt đầu khi người quản trị hoặc nhân viên click vào form Thêm sản phẩm

1 Hệ thống hiển thị trang Thêm sản phẩm

2 Họ tiến hành nhập thông tin sản phẩm mới

4 Hệ thống lưu thông tin sản phẩm mới xuống cơ sở dữ liệu

Bảng 3 8 Use Case Thêm sản phẩm

3.2.9 Use case Thêm dịch vụ

Quản trị viên hoặc nhân viên truy cập vào form Thêm dịch vụ

Post-conditions Người quản trị hoặc nhân viên sau khi tiếp nhận dịch vụ

Họ tiến hành nhập thông tin dịch vụ và lưu vào cơ sở dữ liệu

Use case bắt đầu khi người quản trị hoặc nhân viên click vào form Thêm dịch vụ

1 Hệ thống hiển thị trang Thêm dịch vụ

2 Họ tiến hành nhập thông tin dịch vụ mới

4 Hệ thống lưu thông tin dịch vụ mới xuống cơ sở dữ liệu

Bảng 3 9 Use Case Thêm dịch vụ

Khách hàng mua sản phẩm

Post-conditions Khi chọn mua sản phẩm bỏ hết vào giỏ hàng, khách hàng được chuyển đến trang thanh toán

Use case bắt đầu khi người dung click vào thanh toán

1 Hệ thống hiển thị trang thanh toán cho người dùng nhập thông tin

2 Hệ thống kiểm tra thông tin khác hàng nhập

3 Thanh toán hợp lệ, người dùng sẽ bị trừ số tiền tương ướng với giá trị trong giỏ hàng

Nếu người dùng nhập thông tin cá nhân cũng như mã thẻ thanh toán sai Những công việc sau sẽ được thực hiện:

1 Hệ thống mô tả lý do không mua được hàng

2 Hệ thống lưu ý người dùng nhập lại

3 Nếu người dùng nhập thông tin hợp lệ, bước 2 ở Basic flow được thực hiện

Bảng 3 10 Use Case Đặt hàng

Khách hàng đặt lịch các dịch vụ spa

Post-conditions Khi chọn đặt lịch, khách hàng được chuyển đến trang các phòng và giường còn trống

Use case bắt đầu khi người dùng click vào Đặt lịch

1 Hệ thống hiển thị trang Đặt lịch cho người dùng nhập thông tin và đặt lịch

2 Hệ thống kiểm tra thông tin khác hàng nhập

3 Đặt lịch thành công Khách hàng được thông báo thời gian và mã số phòng thích hợp

Nếu người dùng nhập thông tin cá nhân hoặc thông tin đặt lịch không phù hợp Những công việc sau sẽ được thực hiện:

1 Hệ thống mô tả lý do không đặt lịch được

2 Hệ thống lưu ý người dùng nhập lại

3 Nếu người dùng nhập thông tin hợp lệ, bước 2 ở Basic flow được thực hiện

Bảng 3 11 Use Case Đặt lịch

3.2.12 Use case Cập nhật khách hàng

Name Cập nhật thông tin khách hàng

Nhân viên hoặc người quản trị cập nhật thông tin khách hàng

Post-conditions Tiến hành cập nhật thông tin khách hàng, nếu thông tin không đúng như trên dữ liệu thì cập nhật lại

Use case bắt đầu khi nhân viên hay người quản trị nhấp vào nút cập nhật khách hàng

1 Hệ thống hiển thị toàn bộ thông tin của khách hàng

2 Nhân viên xem thật kĩ xem thông tin khách hàng có sai hay không

Nếu thông tin không đúng như trên dữ liệu hệ thống:

1 Nhân viên click vào nút edit ngay tên của khách hàng đó

2 Nhân viên hoặc người quản trị nhập lại thông tin

3 Thông tin khách hàng được thay đổi

Bảng 3 12 Use Case Cập nhật khách hàng

3.2.13 Use case Cập nhật sản phẩm

Name Cập nhật thông tin sản phẩm

Nhân viên hoặc người quản trị cập nhật thông tin sản phẩm

Post-conditions Tiến hành cập nhật thông tin sản phẩm, nếu thông tin không đúng như trên dữ liệu thì cập nhật lại

Use case bắt đầu khi nhân viên hay người quản trị nhấp vào nút cập nhật sản phẩm

1 Hệ thống hiển thị toàn bộ thông tin của sản phẩm

2 Nhân viên hay Người quản trị xem kĩ thông tin sản phẩm có sai hay không

1 Nhân viên hay Người quản trị click vào nút edit ngay tên của sản phẩm đó

2 Nhân viên hoặc người quản trị nhập lại thông tin

3 Thông tin sản phẩm được thay đổi

Bảng 3 13 Use Case cập nhật sản phẩm

3.2.14 Use case Cập nhật nhân viên

Name Cập nhật thông tin nhân viên

Người quản trị cập nhật thông tin nhân viên

Post-conditions Người quản trị tiến hành cập nhật thông tin nhân viên, nếu thông tin không đúng như trên dữ liệu thì cập nhật lại

Use case bắt đầu khi Người quản trị nhấp vào nút cập nhật nhân viên

1 Hệ thống hiển thị toàn bộ thông tin của nhân viên

2 Người quản trị xem kĩ thông tin nhân viên có sai hay không

1 Người quản trị nhấp vào nút edit ngay tên của nhân viên đó

2 Người quản trị nhập lại thông tin

3 Thông tin nhân viên được thay đổi

Bảng 3 14 Use Case Cập nhật nhân viên

3.2.15 Use case Cập nhật dịch vụ

Name Cập nhật thông tin dịch vụ

Người quản trị hay Nhân viên cập nhật thông tin dich vụ

Post-conditions Người quản trị hay nhân viên tiến hành cập nhật thông tin dịch vụ, nếu thông tin không đúng như trên dữ liệu thì cập nhật lại

Use case bắt đầu khi Người quản trị hay nhân viên nhấp vào nút Sửa dịch vụ

1 Hệ thống hiển thị toàn bộ thông tin của dịch vụ

2 Người quản trị xem kĩ thông tin dịch vụ có sai hay không

1 Người quản trị hay nhân viên nhấp vào nút Sửa ngay tên của dịch vụ đó

2 Nhập lại thông tin dịch vụ

3 Thông tin dịch vụ được thay đổi

Bảng 3 15 Use Case Cập nhật dịch vụ

3.2.16 Use case Thanh toán online

Khách hàng tiến hành thanh toán

Post-conditions Sau khi chọn được các sản phẩm cần mua cho vào giỏ hàng, khách hàng cần tiến hành thanh toán online thông qua MoMo

Use case bắt đầu khi khách hàng click vào nút thanh toán

1 Hệ thống hiển thị trang thanh toán

2 Khách hàng nhập các thông tin cá nhân, quét mã QR thanh toán

3 Hệ thống xác thực thông tin mà người dùng phản hồi về hệ thống

4 Hệ thống xác nhận khách hàng đã thanh toán

Nếu khác hàng nhập sai thông tin cá nhân hoặc tài khoản MoMo, bước 2 ở Basic flow sẽ được gọi lại

Bảng 3 16 Use Case Thanh toán online

Hình 3.4.1 Admin bảo trì website

Hình 3.4.2 Admin thêm khách hàng

Hình 3.4.3: Admin cập nhật khách hàng

Hình 3.4.4: Admin xóa khách hàng

Hình 3.4.5: Admin thêm nhân viên

Hình 3.4.6: Admin cập nhật nhân viên

Hình 3.4.7: Admin xóa nhân viên

Hình 3.4.8: Admin tìm kiếm sản phẩm

Hình 3.4.9: Admin thêm sản phẩm

Hình 3.4.10: Admin cập nhật sản phẩm

Hình 3.4.11: Admin xóa sản phẩm

Hình 3.4.12: Nhân viên thêm khách hàng

Hình 3.4.13: Nhân viên cập nhật khách hàng

Hình 3.4.14: Nhân viên xóa khách hàng

Hình 3.4.15: Nhân viên tìm kiếm sản phẩm

Hình 3.4.16: Nhân viên thêm sản phẩm

Hình 3.4.17: Nhân viên cập nhật sản phẩm

Hình 3.4.18: Nhân viên xóa sản phẩm

Hình 3.4.19: Khách hàng đăng ký thành viên

Hình 3.4.20 Khách hàng tìm kiếm sản phẩm

Hình 3.4.21: Khách hàng mua sản phẩm

Hình 3.4.22: Khách hàng thanh toán

Hình 3.4.23: Khách hàng đặt lịch

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

About Bảng thông tin về người quản lý Spa

Booking Bảng thông tin đặt lịch (Booking)

Contact Bảng thông tin liên hệ

ClientAccount Bảng thông tin về tài khoản khách hàng

AccountAdmin Bảng thông tin về tài khoản người quản trị

Footer Bảng thông tin Footer

FooterCategory Bảng thông tin danh mục Footer

Menu Bảng thông tin Menu

MenuType Bảng thông tin về loại Menu

Order Bảng thông tin về Đặt hàng

OrderInformation Bảng thông tin về mã sản phẩm, id đặt hàng và số lượng Product Bảng thông tin về sản phẩm

ProductCategory Bảng thông tin về danh mục sản phẩm

Room Bảng thông tin về phòng

Service Bảng thông tin về các dịch vụ

ServiceCategory Bảng danh mục về các dịch vụ

Bảng 3 17 Mô tả tên bảng trong sơ đồ ERD

3.5.2 Danh sách chi tiết thuộc tính các bảng

Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 id int Mã About (khóa chính)

1 id int Mã Booking (khóa chính)

2 ArrivalTime datetime Thời gian đặt lịch

3 EndTime int Thời gian kết thúc

4 ClientAccountId int Mã tài khoản người dùng

5 ServiceId int Mã dịch vụ

8 Duration int Thời gian hẹn (phút)

2 content ntext Tên thông tin liên hệ

1 id int Mã tài khoản khách hàng

2 Firstname nvarchar Tên khách hàng

3 Lastname nvarchar Họ khách hàng

5 mobilephone varchar Số điện thoại khách hàng

7 email nvarchar Email khách hàng

10 shippingAdress nvarchar Địa chỉ ship hàng

11 status bit Trạng thái tải khoản

1 id int Mã tài khoản Admin

2 userName nvarchar Tên tài khoản

4 status bit Trạng thái kích hoạt

5 type bit Loại tài khoản

2 text nvarchar Thông tin về footer

3 link nvarchar Link về spa

4 displayOrder int Thứ tự hiển thị

5 typeId int Mã về loại Footer

1 id int Mã Mục Footer

2 name nvarchar Tên vị trí mục Footer

2 text nvarchar Tên các loại Menu

3 link nvarchar Link về menu spa

5 typeId int Mã về loại Menu

6 status bit Trạng thái Menu

1 id int Mã Mục Menu

2 name nvarchar Tên danh mục Menu

2 createdDate datetime Ngày sản phẩm được order

3 idStatus int Mã trạng thái

4 clientAccountId bigint Mã tài khoản người dùng

5 PaymentMethod nvarchar Phương thức thanh toán

6 ShippingAddress nvarchar Địa chỉ nhận hàng

9 CouponCode nvarchar Mã giảm giá

10 GrandTotal decimal Tổng thanh toán

1 id bigint Mã Thông tin Đặt hàng

2 idProduct bigint Mã sản phẩm

4 Quantity int Số lượng hàng được đặt

1 id int Mã sản phẩm (khóa chính)

2 name nvarchar Tên sản phẩm

3 metaTitle nvarchar Tên tiêu đề sản phẩm

4 description nvarchar Mô tả về sản phẩm

5 image nvarchar Hình ảnh sản phầm

6 moreImages XML Những hình ảnh sản phẩm khác

8 quantity int Số lượng sản phẩm

9 idCategory int Mã danh mục sản phẩm

13 promotionPrice decimal Giá ưu đãi

14 detail nvarchar Mô tả chi tiết sản phẩm

1 id int Mã ProductCategory (khóa chính)

2 name nvarchar Tên mục sản phẩm

3 metatitle nvarchar Tên tiêu đề mục sản phẩm

4 displayOrder Int Thứ tự hiển thị

7 modifiedDate date Ngày chỉnh sửa

1 id int Mã id phòng phòng

3 Code nvarchar Mã code phòng

1 id int Mã dịch vụ (khóa chính)

2 name nvarchar Tên dịch vụ

3 Detail nvarchar Mô tả chi tiết dịch vụ

4 description nvarchar Mô tả về dịch vụ

5 image nvarchar Hình ảnh dịch vụ

6 moreImages XML Những hình ảnh khác của dịch vụ

7 price decimal giá dịch vụ

8 idCategory int Mã danh mục dịch vụ

12 promotionPrice Decimal Giá ưu đãi

13 Duration int Thời gian dịch vụ (phút)

14 IsDisplayHomePage int Hiển thị lên trang chủ hay không Bảng “ServicesCategory”

1 id int Mã ServicesCategory (khóa chính)

2 name nvarchar Tên mục dịch vụ

3 metatitle nvarchar Tên tiêu đề mục dịch vụ

4 displayOrder Int Thứ tự hiển thị

9 ShowOnHome bit Hiển thị lên trang chủ hay không

1 id int Mã Slide (khóa chính)

4 link Int Thứ tự hiển thị

Hình 3.6.1: Giao diện đăng nhập

STT Tên Kiểu Mô tả chi tiết

Input Nhập thông tin tài khoản

Input Nhập thông tin mật khẩu

3 Đăng nhập Button Nhấn để đăng nhập

Bảng 3 18 Mô tả giao diện đăng nhập

Hình 3.6.2 Giao diện trang quản lý

1 Bảng Điều khiển kỹ thuât số

2 Đặt hàng Nhấn để hiện thị thông tin đặt hàng

3 Khách hàng Nhấn để hiện thị thông tin khách hàng

4 SEO content Nhấn để hiển thị thông tin bảng SEO

5 Tài khoản Nhấn để hiển thị thông tin tài khoản

6 Nhân viên Nhấn để hiển thị thông tin nhân viên

7 Sản phẩm Nhấn để hiển thị thông tin sản phẩm

8 Dịch vụ Nhấn để hiển thị thông tin dịch vụ

9 Mã giảm giá Nhấn để hiển thị thông tin Mã giảm giá

10 Blog Nhấn để hiển thị thông tin Blog

11 Bảng Dictionary Nhấn để hiển thị thông tin Dictionary

12 Bảng địa chỉ web Nhấn để hiển thị thông tin địa chỉ web

13 Quản lý nội dung trên trang web

Nhấn để hiển thị thông tin nội dung trang web

Bảng 3 19 Bảng mô tả giao diện trang quản lý

Hình 3.6.3 Giao diện trang đặt hàng

1 Thông tin đơn hàng Nhấn để hiển thị thông tin đơn hàng được đặt của khách hàng

2 Sửa đổi thông tin đơn hàng

Nhấn để cập nhật thông tin đơn hàng

3 Xóa thông tin đơn hàng

Nhấn để xóa thông tin đơn hàng

Bảng 3 20 mô tả giao diện trang đặt hàng

Hình 3.6.4 Giao diện trang SEO Content

Hình 3.6.5 Giao diện trang tài khoản

Button Nhấn để kích hoạt tài khoản hoặc khóa tài khoản

2 Sửa đổi thông tin tài khoản

Nhấn để sửa đổi thông tin tài khoản

3 Xóa thông tin tài khoản

Nhấn để xóa thông tin tài khoản

Bảng 3 21 Mô tả giao diện Tài khoản

Hình 3.6.6 Giao diện trang Nhân viên

1 Hiển thị Nhân viên lên Trang chủ

Button Chọn Active để hiển thị thông tin nhân viên lên trang chủ Disable để không hiển thị

+ Active: Nhân viên còn hoạt động + Disable: Nhân viên không hoạt động

3 Chỉnh sửa thông tin nhân viên

Nhấn để chỉnh sửa thông tin nhân viên

4 Xóa nhân viên Nhấn để xóa nhân viên

Bảng 3 22 Mô tả giao diện trang Nhân viên

• Trang danh sách sản phẩm

Hình 3.6.7 Giao diện trang danh sách Sản phẩm

1 Tìm kiếm sản phẩm Input Nhập tên sản phẩm cần tìm kiếm

2 Chỉnh sửa thông tin sản phẩm

Nhấn để chỉnh sửa thông tin sản phẩm

3 Xóa sản phẩm Nhấn để xóa sản phẩm

Bảng 3 23 Mô tả giao diện trang danh sách sản phẩm

Hình 3.6.8 Giao diện trang thêm Sản phẩm

1 Tên sản phẩm Input Nhập tên sản phẩm

2 Thẻ tiêu đề sản phẩm

Input Nhập thông tin thẻ tiêu đề sản phẩm

3 Thẻ miêu tả sản phẩm

Input Nhập thông tin thẻ miêu tả sản phẩm

4 Thẻ từ khóa Input Nhập thông tin thẻ từ khóa

5 Phân loại sản phẩm Select Nhấn để phân loại sản phẩm

6 Giá sản phẩm Input Nhập thông tin giá sản phẩm

7 Giá khuyến mãi Input Nhập giá khuyến mãi

9 Hình ảnh Nhấn để chọn hình ảnh cho sản phẩm

10 Mô tả sản phẩm Input Nhập mô tả sản phẩm

11 Mô tả chi tiết sản phẩm

Bảng 3 24 Bảng mô tả giao diện trang thêm sản phẩm

• Trang danh sách Danh mục sản phẩm

Hình 3.6.9 Giao diện trang danh sách danh mục sản phẩm

1 Tạo danh mục mới Button Nhấn để thêm danh mục sản phẩm mới

+ Kích hoạt: Danh mục sản phẩm vẫn còn hoạt động

+ Khóa: Danh mục sản phẩm đã khóa

3 Chỉnh sửa danh mục sản phẩm

Nhấn để chỉnh sửa danh mục sản phẩm

4 Xóa danh mục sản phẩm

Nhấn để xóa danh mục sản phẩm

Bảng 3 25 Bảng mô ả giao diện trang danh sách danh mục sản phẩm

• Trang Thêm Danh mục sản phẩm

Hình 3.6.10 Giao diện trang thêm danh mục sản phẩm

1 Tên danh mục sản phẩm

Input Nhập tên danh mục sản phẩm cần thêm

2 Thẻ tiêu đề danh mục sản phẩm

Input Nhập tên tiêu đề danh mục sản phẩm

3 Thứ tự hiển thị Nhập thứ tự hiển thị của danh mục mục sản phẩm

4 Hiển thị trang trang web

+ Display: Hiển thị trên trang web + Non-Display: Không hiển thị

+ Active: Danh mục sản phẩm hoạt động + Disable: Danh mục sản phẩm đang khóa

Bảng 3 26 Bảng mô tả giao diện trang thêm danh mục sản phẩm

• Trang danh sách Dịch vụ

Hình 3.6.11 Giao diện trang danh sách Dịch vụ

1 Tìm kiếm dịch vụ Input Nhập tên dịch vụ cần tìm kiếm

2 Chỉnh sửa thông tin dịch vụ

Nhấn để chỉnh sửa thông tin dịch vụ

3 Xóa dịch vụ Nhấn để xóa dịch vụ

Bảng 3 27 Bảng mô tả giao diện trang danh sách dịch vụ

Hình 3.6.12 Giao diện trang thêm Dịch vụ

1 Tên dịch vụ Input Nhập tên dịch vụ

2 Thẻ tiêu đề dịch vụ Input Nhập thông tin thẻ tiêu đề dịch vụ

3 Thẻ miêu tả dịch vụ Input Nhập thông tin thẻ miêu tả dịch vụ

4 Thẻ từ khóa Input Nhập thông tin thẻ từ khóa

5 Phân loại dịch vụ Select Nhấn để phân loại dịch vụ

6 Giá dịch vụ Input Nhập thông tin giá dịch vụ

7 Giá khuyến mãi Input Nhập giá khuyến mãi

8 Thời gian phục vụ Input Nhập thời gian phục vụ

9 Hình ảnh Nhấn để chọn hình ảnh cho dịch vụ

10 Mô tả dịch vụ Input Nhập mô tả dịch vụ

11 Mô tả chi tiết dịch vụ

Bảng 3 28 Bảng mô tả giao diện trang thêm dịch vụ

• Trang danh sách Danh mục dịch vụ

Hình 3.6.13 Giao diện trang danh sách danh mục dịch vụ

1 Tìm kiếm danh mục dịch vụ

Input Nhập danh mục dịch vụ cần tìm

2 Chỉnh sửa danh mục dịch vụ

Nhấn để chỉnh sửa danh mục dịch vụ

3 Xóa danh mục dịch vụ

Nhấn để xóa danh mục dịch vụ

4 Tạo danh mục mới Button Nhấn để thêm danh mục dịch vụ mới

Bảng 3 29 Bảng mô tả giao diện trang danh sách danh mục dịch vụ

• Trang Thêm Danh mục dịch vụ

Hình 3.6.14 Giao diện trang thêm danh mục dịch vụ

1 Tên danh mục dịch vụ

Input Nhập tên danh mục dịch vụ cần thêm

2 Thẻ tiêu đề danh mục dịch vụ

Input Nhập tên tiêu đề danh mục dịch vụ

3 Thứ tự hiển thị Nhập thứ tự hiển thị của danh mục dịch vụ

+ Active: Danh mục sản phẩm hoạt động + Disable: Danh mục sản phẩm đang khóa

5 Lưu Button Nhấn để lưu thông tin đã thêm

6 Hủy Button Nhấn để hủy

Bảng 3 30 Bảng mô tả giao diện trang thêm danh mục dịch vụ

Hình 3.6.15 Giao diện trang mã giảm giá

1 Tìm kiếm mã giảm giá

Input Nhập mã giảm giá cần tìm

2 Chỉnh sửa mã giảm giá

Nhấn để chỉnh sửa mã giảm giá

3 Xóa mã giảm giá Nhấn để xóa mã giảm giá

4 Thêm mới Mã giảm giá

Button Nhấn để thêm Mã giảm giá mới

Bảng 3 31 Bảng mô tả giao diện trang mã giảm giá

Hình 3.6.16 Giao diện trang danh sách blog

1 Thêm mới Blog Button Nhấn để thêm blog mới

+ Kích hoạt: Blog đang hoạt động + Khóa : Khóa blog, không hoạt động

3 Chỉnh sửa blog Nhấn để chỉnh sửa thông tin blog

4 Xóa blog Nhấn để xóa blog

Bảng 3 32 Bảng mô tả giao diện trang danh sách blog

Hình 3.6.17 Giao diện trang danh mục blog

1 Thêm mới danh mục Blog

Button Nhấn để thêm danh mục blog mới

+ Kích hoạt: Danh mục Blog đang hoạt động

+ Khóa : Khóa danh mục Blog, không hoạt động

3 Chỉnh sửa blog Nhấn để chỉnh sửa thông tin danh mục blog

4 Xóa blog Nhấn để xóa danh mục blog

Bảng 3 33 Bảng mô tả giao diện trang danh mục blog

Hình 3.6.18 Giao diện trang Dictionary

1 Chỉnh sửa thông tin từ khóa

Nhấn để chỉnh sửa thông tin từ khóa

2 Xóa từ khóa Nhấn để xóa thông tin từ khóa

3 Tạo mới từ khóa Button Nhấn để thêm mới thông tin từ khóa

Bảng 3 34 Bảng mô tả giao diện trang Dictionary

Hình 3.6.19 Giao diện trang quản lý Banner

1 Thêm mới banner Button Nhấn để thêm mới banner

2 Chỉnh sửa thông tin banner

Nhấn để chỉnh sửa banner

3 Xóa banner Nhấn để xóa thông tin banner

Bảng 3 35 Bảng mô tả giao diện trang quản lý Banner

Hình 3.6.20 Giao diện trang About Us

1 Thêm mới thông tin giới thiệu About us

Button Nhấn để thêm mới thông tin About us

Nhấn để chỉnh sửa thông tin About us

3 Xóa About us Nhấn để xóa thông tin About us

Bảng 3 36 Bảng mô tả giao diện trang About Us

• Trang Quản lý Liên hệ

Hình 3.6.21 Giao diện trang Contact

1 Địa chỉ Store Input Nhập thông tin Địa chỉ

2 Số điện thoại liên hệ

Input Nhập số điện thoại để khách hàng liên hệ

3 Email liên hệ Input Nhập thông tin Email để khách hàng liê hệ

Bảng 3 37 Bảng mô tả giao diện trang Contact

Hình 3.6.22 Giao diện trang quản lý Footer

1 Thêm mới Footer Button Nhấn để thêm Footer mới

+ Kích hoạt: Đang hoạt động + Khóa: Ngưng hoạt động

Nhấn để chỉnh sửa thông tin Footer

4 Xóa Footer Nhấn để xóa Footer

Bảng 3 38 Bảng mô tả giao diện trang quản lý Footer

Hình 3.6.23 Giao diện trang quản lý danh sách Menu

1 Thêm mới Menu Button Nhấn để thêm Menu mới

Nhấn để chỉnh sửa thông tin Menu

4 Xóa Menu Nhấn để xóa Menu

Bảng 3 39 Bảng mô tả giao diện trang quản lý danh sách Menu

- Trang quản lý Slide Home

Hình 3.6.24 Giao diện trang quản lý Slide Home

1 Thêm mới Slide Button Nhấn để thêm Slide mới

Nhấn để chỉnh sửa thông tin Slide

4 Xóa Slide Nhấn để xóa Slide

Bảng 3 40 Bảng mô tả giao diện trang quản lý Slide Home

- Trang Quản lý Đặt lịch hẹn

Hình 3.6.25 Giao diện trang quản lý Đặt lịch

1 Tìm kiếm số điện thoại

Input Tìm kiếm số điện thoại của khách hàng

2 Xóa lịch hẹn Button Nhấn để xóa lịch hẹn

Bảng 3 41 Bảng mô tả giao diện trang quản lý Đặt lịch

Hình 3.6.26 Giao diện trang chủ

1 Trang chủ Trang chủ web

2 Sản phẩm Nhấn để xem các sản phẩm được bán

3 Dịch vụ Nhấn để xem các dịch vụ

4 Abou Us Nhấn để xem thông tin về store

5 Blog Nhấn để xem Blog, Hình ảnh

6 Contact Nhấn để xem thông tin liên hệ

7 Đặt lịch Nhấn để đặt lịch các dịch vụ sp

8 Đăng nhập, đăng ký Nhấn để đăng nhập hoặc đăng ký thành viên

9 Giỏ hàng Nhấn để xem giỏ hàng

Bảng 3 42 Bảng mô tả giao diện trang chủ

Hình 3.6.27 Giao diện trang sản phẩm

1 Thêm vào giỏ hàng Thêm sản phẩm vào giỏ hàng

2 Chi tiết sản phẩm Nhấn để xem chi tiết sản phẩm

3 Các trang sản phẩm khác

Nhấn để xem các sản phẩm khác

Bảng 3 43 Bảng mô tả giao diện trang sản phẩm

Hình 3.6.28 Giao diện trang chi tiết 1 sản phẩm

1 Xem hình sản phẩm Nhấn để xem full hình sản phẩm

2 Số lượng sản phẩm muốn mua

Nhấn để chọn số lượng sản phẩm muốn mua

3 Thêm vào giỏ hàng Nhấn để thêm vào giỏ hàng

4 Mô tả sản phẩm Nhấn để xem mô tả sản phẩm

5 Xem đánh giá sản phẩm

Nhấn để xem đánh giá sản phẩm

Bảng 3 44 Bảng mô tả giao diện trang chi tiết 1 sản phẩm

Hình 3.6.29 Các danh mục của dịch vụ

Hình 3.6.30 Giao diện của trang dịch vụ

STT Tên Bảng mô tả giao diện của trang dịch vụ

Kiểu Mô tả chi tiết

1 Đặt lịch Nhấn để đặt lịch cho dịch vụ

2 Xem chi tiết dịch vụ Nhấn xem chi tiết dịch vụ

Bảng 3 45 Bảng mô tả giao diện của trang dịch vụ

Hình 3.6.31 Giao diện trang chi tiết về một dịch vụ

Hình 3.6.32 Giao diện trang About Us

Hình 3.6.33 Các danh mục của Blog

Hình 3.6.34 Giao diện chi tiết một danh mục blog

Nhập tên blog cần tìm kiếm

2 Xem các danh mục blog khác

Nhấn xem các danh mục blog khác

Bảng 3 46 Bảng mô tả giao diện chi tiết một danh mục blog

Hình 3.6.35 Giao diện trang Contact

Hình 3.6.36 Giao diện Đặt lịch dịch vụ

1 Ngày muốn đặt lịch Select Nhấn chọn ngày muốn đặt lịch hẹn

2 Giờ muốn đặt lịch Select Nhấn chọn giờ muốn đặt lịch hẹn

3 Chọn dịch vụ Select Nhấn để chọn dịch vụ muốn đặt lịch hẹn

4 Nhắn tin Input Nhắn tin với Store

5 Đặt lịch hẹn Nhấn để đồng ý đặt lịch hẹn

Bảng 3 47 Bảng mô tả giao diện Đặt lịch dịch vụ

Hình 3.6.37 Giao diện Giỏ hàng

1 Hình ảnh sản phẩm img Hình ảnh sản phẩm

2 Tên sản phẩm Tên sản phẩm

3 Giá tiền sản phẩm Giá tiền sản phẩm

4 Tổng giá tiền cho sản phẩm ứng với số lượng được chọn

Nhắn tin với Store

5 Xóa sản phẩm Xóa sản phẩm

Bảng 3 48 Bảng mô tả giao diện Giỏ hàng

CÀI ĐẶT VÀ KIỂM THỬ

Tiêu đề	Xây Dựng Website Phục Vụ Hoạt Động Kinh Doanh Của Spa
Thể loại	đồ án tốt nghiệp

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