tiểu luận báo cáo dự án 1 website siêu thị mini

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.64 MB, 61 trang )

Trang 1<div class="page_container" data-page="1">

TRƯỜNG CAO ĐẲNG FPT POLYTECHIC CẦN THƠ



WEBSITE SIÊU THỊ MINI

Ngành: Thiết kế Website

GVHD: Lê Ngọc ĐàoLớp: WD18301– Nhóm 3

PC02907 Nguyễn Hồng Ngọc Cương Thành viên

Cần Thơ, tháng 11 năm 2023

</div>Trang 2<div class="page_container" data-page="2">

DỰ ÁN 1

Trang iTHIẾT KẾ TRANG WEB

LỜI NÓI ĐẦU

Đây là tài liệu trình bày về ý tưởng, kế hoạch, các bước triển khai, thực hiện vàhoàn tất của một dự án phầm mềm - Website thương mại điện tử theo yêu cầu củaNEST MART & GROCERY – Một cửa hàng bán đầy đủ thực phẩm và muốn pháttriển kênh bán hàng trên Internet.

Tài liệu này được biên soạn bởi nhóm sinh viên gồm Đào Thanh Toàn, Lê NgọcLinh, Trần Thị Kim Đang, Nguyễn Hoàng Ngọc Cương từ lớp WD18301, ngành Thiếtkế trang Web tại trường Cao đẳng FPT Polytechnic. Dự án tập trung vào việc pháttriển một trang web thương mại điện tử cho NEST MART & GROCERY, một cửahàng thực phẩm đa dạng. Mục tiêu chính là mở rộng kênh bán hàng qua Internet đểđáp ứng nhu cầu ngày càng tăng của khách hàng.

Tài liệu này không chỉ chia sẻ ý tưởng và kế hoạch mà nhóm đã xây dựng màcịn tập trung vào q trình thực hiện và hồn tất dự án. Bằng cách này, giảng viên cóthể hiểu rõ từng bước tiến hành, từ khi nhận dự án từ khách hàng đến q trình triểnkhai và bàn giao sản phẩm. Mục đích của tài liệu là giúp giảng viên dễ dàng theo dõivà đánh giá quá trình phát triển dự án của sinh viên, từ đó đưa ra góp ý và khuyếnkhích sự cải tiến trong tương lai.

Mục đích của tài liệu: Giúp giảng viên có thể thấy rõ các bước làm dự án của mộtsinh viên, quá trình làm bài, triển khai sản phẩm, đóng gói và thành quả của một dự án.Khi đọc tài liệu có thể biết rõ được quá trình phát triển dự án giúp dễ dàng khắc phụcnhững điểm thiếu hoặc nâng cấp trong tương lai một cách tốt hơn.

Tài liệu cũng nhấn mạnh vào việc đưa ra các chức năng đã hoàn thiện và cáccông việc đang được phát triển thêm. Nhóm mong muốn nhận được sự hỗ trợ và góp ýtừ giảng viên để cải thiện dự án. Bằng cách này, họ hy vọng nhận được sự định hình vàhướng dẫn từ người có kinh nghiệm, từ đó nâng cao chất lượng và hoàn thành dự ánmột cách xuất sắc hơn. Cuối cùng, nhóm kính mong nhận được sự giúp đỡ nhiệt tìnhtừ giảng viên và xin chân thành cảm ơn.

Xin chân thành cảm ơn!

</div>Trang 3<div class="page_container" data-page="3">

1.2Yêu cầu của NEST MART & GROCERY ... 1

1.2.1Các yêu cầu của cửa hàng cho người tiêu dùng...1

1.2.2Các yêu cầu cho trang quản trị ... 3

1.2.3Các yêu cầu bảo mật ... 4

1.2.4Các yêu cầu công nghệ ... 5

2.2.2Thiết kế chi tiết các thực thể...14

2.3Thiết kế giao diện ... 20

2.3.2Thiết kế phần quản trị ...21

2.3.3Thiết kế phần khách hàng ... 29

</div>Trang 4<div class="page_container" data-page="4">

DANH SÁCH HÌNH

Hình 1. 1 Bảng phân công công việc ... 5

Hình 1. 2 Sơ đồ usecase người dùng ... 6

Hình 1. 3 Sơ đồ usecase quản trị ... 6

Hình 2. 1 Sơ đồ Website giới thiệu sản phẩm của NEST MART & GROCERY ... 12

Hình 2. 2 ERD Diagram level 2 ... 13

Hình 2. 3 ERD Diagram level 3 ... 13

Hình 2. 21 Giao diện trang chủ ... 32

Hình 2. 22 Giao diện trang cửa hàng ... 34

Hình 2. 23 Giao diện trang chi tiết sản phẩm ... 36

Hình 2. 24 Giao diện trang đăng nhập ... 36

Hình 2. 25 Giao diện trang đăng ký ... 37

Hình 2. 26 Giao diện trang tin tức ... 39

Hình 2. 27 Giao diện trang giỏ hàng ... 40

Hình 2. 28 Giao diện trang giới thiệu ... 42

Too long to read onyour phone? Save

to read later onyour computer

Save to a Studylist

</div>Trang 5<div class="page_container" data-page="5">

Hình 2. 29 Giao diện trang liên hệ ... 43

Hình 2. 30 Giao diện trang Deals ... 45

Hình 2. 31 Giao diện trang tìm kiếm ... 47

Hình 2. 32 Giao diện trang lấy lại mật khẩu ... 47

Hình 2. 33 Giao diện trang bài viết chi tiết ... 49

Hình 2. 34 Giao diện trang chính sách bảo mật ... 50

Hình 2. 35 Giao diện trang điều khoản dịch vụ ... 51

Hình 2. 36 Giao diện trang thanh toán ... 52

Hình 2. 37 Giao diện trang xuất hóa đơn ... 53

</div>Trang 6<div class="page_container" data-page="6">

DANH SÁCH BẢNG

Bảng 2. 1 Bảng category lưu thông tin danh mục ... 15

Bảng 2. 2 Bảng product lưu thông tin các các mặt sản phẩm ... 15

Bảng 2. 3 Bảng user lưu thông tin của khách hàng ... 16

Bảng 2. 4 Bảng comment lưu thơng tin các bình luận của khách hàng về các sảnphẩm ... 16

Bảng 2. 5 Bảng cart dùng để lưu thông tin các giỏ hàng của khách hàng ... 17

Bảng 2. 6 Bảng bill lưu thơng tin hóa đơn của người dùng ... 17

Bảng 2. 7 Bảng banner lưu thông tin ảnh banner: ... 18

Bảng 2. 8 Bảng bill_detail lưu thông tin giỏ hàng của khách hàng ... 19

Bảng 2. 9 Bảng payment lưu thông tin thanh toán của khách hàng ... 19

Bảng 2. 10 Bảng images lưu hình ảnh của sản phẩm: ... 20

</div>Trang 7<div class="page_container" data-page="7">

DỰ ÁN 1

THIẾT KẾ TRANG WEB

CHƯƠNG 1: PHÂN TÍCH1.1 Giới thiệu NEST MART & GROCERY

1.1.1 Giới thiệu

NEST MART & GROCERY, đối tác của dự án, là một chuỗi cửa hàng bán thựcphẩm đã khẳng định vị thế của mình trên khắp cả nước Việt Nam. Với mơ hình kinhdoanh đa dạng, họ chuyên cung cấp các mặt hàng thực phẩm đa dạng như rau củ tươisạch, trái cây tươi ngon và các sản phẩm thực phẩm đóng gói chất lượng. Sự cam kếtđối với chất lượng và an toàn của sản phẩm là điểm mạnh giúp NEST MART &GROCERY xây dựng lịng tin từ phía khách hàng, và đây là đối tác lý tưởng cho dự ánthương mại điện tử này.

1.1.2 Hiện trạng

Hiện tại, NEST MART & GROCERY đang đối mặt với thách thức là thiếu mộttrang web giới thiệu chi tiết về các sản phẩm và cửa hàng của mình, điều này làm giảmkhả năng tiếp cận của họ đến người tiêu dùng trực tuyến. Thiếu một kênh này khôngchỉ làm giảm khả năng quảng bá và tiếp cận thị trường mà còn gây mất mát về cơ hộikinh doanh. Điều này tạo nên một động lực mạnh mẽ cho dự án phần mềm - websitethương mại điện tử mà nhóm sinh viên đang phát triển.

1.2 Yêu cầu của NEST MART & GROCERY

Để đáp ứng mong muốn của NEST MART & GROCERY, dự án phần mềm sẽtập trung vào việc xây dựng một website chính thức. Trang web này sẽ giúp cửa hànggiới thiệu một cách chi tiết và hấp dẫn về các sản phẩm đa dạng và chất lượng mà họđang kinh doanh. Đồng thời, trang web sẽ cung cấp một kênh chính thức để người tiêudùng đưa ra ý kiến và đánh giá về các sản phẩm, từ đó tạo ra một cộng đồng mua sắmtrực tuyến tích cực.

1.2.1 Các yêu cầu của cửa hàng cho người tiêu dùngCấu trúc chung của các trang trong website:

- Chứa danh mục danh mục sản phẩm để khách hàng dễ dàng tìm kiếm sản phẩm theo từng danh mục.

- Có logo, tên cửa hàng.- Tìm kiếm sản phẩm theo tên.- Tìm kiếm sản phẩm theo danh mục.

- Có giỏ hàng để khách hàng dễ kiểm tra giỏ hàng chính mình.- Hiện thị các sản phẩm nổi bật.

- Đăng nhập và thông tin người tiêu dùng sẽ được lưu.

Trang 1

</div>Trang 8<div class="page_container" data-page="8">

- Đăng ký tài khoản.

- Đăng xuất tài khoản (nếu đã đăng nhập).- Có banner.

- Có footer gồm các sản phẩm, chính sách cửa hàng, liên hệ cửa hàng, bản quyền cửa hàng.

- Có thanh nav menu (trang chủ, giới thiệu, sản phẩm, tin tức, liên hệ, tài khoản).- Có liên kết đến các trang mạng xã hội.

Trang chính của website:

- Banner trưng bày các sản phẩm đặc biệt của cửa hàng được nhân viên quản trị chỉ định.

- Các sản phẩm đặc biệt được trình bày theo cách theo cách sử dụng slideshow.- Hiển thị các sản phẩm mới nhất, nổi bật, được xem nhiều nhất.

- Giới thiệu ngắn về thơng tin cửa hàng ở footer.- Có tin tức về cửa hàng được đăng bởi quản trị.

Trang trưng bày sản phẩm:

- Khi người dùng chọn danh mục hoặc tìm kiếm theo tên thì danh sách sản phẩm được hiện ra.

- Mỗi sản phẩm cần hiển thị hình ảnh, tên, đơn giá.

- Khi người dùng nhấp vào sản phẩm thì sẽ chuyển đến trang hiện thị chi tiết sản phẩm đồng thời tăng số lần xem.

- Có menu hiển thị lượt xem nhiều nhất các sản phẩm.

- Cập nhật thông tin tài khoản.- Cấp quyền admin.

Trang giới thiệu:

Trang 2

</div>Trang 9<div class="page_container" data-page="9">

DỰ ÁN 1

Trang 3THIẾT KẾ TRANG WEB

- Giới thiệu về NEST MART & GROCERY.- Giới thiệu về đội ngũ nhân sự.

- Giới thiệu về các châm ngơn, tiêu chí làm việc.

Quản lý khách hàng

- Thơng báo

</div>Trang 10<div class="page_container" data-page="10">

- Xem được chi tiết các tài khoản bao gồm ảnh đại diện, trạng thái, vai trò, tênngười dùng, mật khẩu.

- Xem được tất cả các tài khoản của người dùng.

Quản lý danh mục:

- Thêm, sửa, xóa cứng, xóa mềm danh mục.- Xem được các danh mục có sẵn.- Xem theo trạng thái danh mục.

Quản lý banner (hiển sản phẩm nổi bật) :

- Xem được banner- Thêm sửa banner- Xóa cứng, xóa mềm banner

Gửi email cho khách hàng:

- Gửi thông báo về các cửa hàng về sự kiện.- Tương tác của khách hàng về cửa hàng trên website.

1.2.3 Các yêu cầu bảo mật

Để đảm bảo tính an tồn và chính xác của dữ liệu, tất cả các form nhậptrong hệ thống được kiểm soát một cách hợp lý. Các biện pháp an ninh và kiểmtra dữ liệu được tích hợp để ngăn chặn và xử lý thông tin không hợp lệ từ phíangười dùng.

Đối với khách hàng chưa đăng nhập, hệ thống đã được thiết lập sao cho họkhơng có quyền thực hiện các hành động như gửi bình luận về sản phẩm, đổimật khẩu, cập nhật thông tin tài khoản, hay mua hàng. Điều này giúp bảo vệthông tin cá nhân của khách hàng và đảm bảo rằng chỉ người dùng được xácthực mới có quyền truy cập các chức năng quan trọng này.

</div>Trang 11<div class="page_container" data-page="11">

Đặc biệt, chỉ có các nhân viên quản trị mới được phép thực hiện các chứcnăng của admin. Điều này đảm bảo rằng quyền lực và trách nhiệm cao nhất chỉthuộc về những người được ủy quyền, giúp ngăn chặn sự truy cập trái phép vàbảo vệ tính tồn vẹn của dữ liệu quan trọng trong hệ thống.

1.2.4 Các yêu cầu công nghệ

Website được xây dựng với PHP, MySQL, Figma, HTML& CSS, JS, Bootstrap5.

1.2.5 Tính khả thi

Vì đã được học qua các môn để thực hiện dự án như: HTML5, CSS3, JS,PHP, MySql,.. dự án mẫu và đã làm qua dự án, cũng như có các tài liệu trênInternet và các thành viên hỗ trợ nhau. Các thành viên trong nhóm tích cực làmtheo những gì được nhóm trưởng u cầu, hi vọng nhóm 2 sẽ thực hiện dự ánmột cách tốt nhất và nhanh nhất. Hi vọng thầy cô có thể góp ý và chỉ dạy thêm.

1.2.6 Phân cơng cơng việc

Hình 1. 1 Bảng phân cơng cơng việc

</div>Trang 12<div class="page_container" data-page="12">

DỰ ÁN 1

THIẾT KẾ TRANG WEB

Hình 1. 2 Sơ đồ usecase người dùng

Use case cho quản trị:

Hình 1. 3 Sơ đồ usecase quản trị

Trang 6

</div>Trang 13<div class="page_container" data-page="13">

DỰ ÁN 1

Trang 7THIẾT KẾ TRANG WEB

1.3.1 Đặc tả chức năng

1.3.1.1 Chức năng dành cho khách hàng

Cấu trúc chung của các trang web:

- Xem các thông tin cửa hàng.

- Hiển thị danh mục, tìm kiếm theo tên và danh mục, giỏ hàng, các sản phẩm của cửa hàng được chỉ định và form đăng nhập cũng như đăng ký.

- Nếu người đăng nhập có vai trị là nhân viên thì hiển thị liên kết đến trang quảntrị.

- Chứa danh mục danh mục sản phẩm để khách hàng dễ dàng tìm kiếm sản phẩmtheo từng danh mục.

- Đều có menu, banner và footer.

- Có chuyển ngơn ngữ để người dùng có thể chuyển sang ngơn ngữ tiếng anh.

Tìm sản phẩm theo danh mục: Liệt kê các sản phẩm theo danh mục được chọn

bởi khách hàng. Thông tin mỗi sản phẩm gồm tên, ảnh và đơn giá. Liên kết đến trangchi tiết sản phẩm.

Tìm hàng theo tên: Liệt kê các sản phẩm theo tên hàng hoặc tên danh mục theo

yêu cầu tìm kiếm của khách hàng. Thơng tin mỗi sản phẩm gồm tên, ảnh và đơn giá.Liên kết đến trang chi tiết sản phẩm.

Xem thông tin chi tiết: Hiển thị thông tin chi tiết của sản phẩm được chọn bởi

khách hàng và các sản phẩm cùng danh mục có gắn liên kết đến trang chi tiết sảnphẩm để khách hàng có thể xem luôn mà không cần phải trở lại trang liệt kê sản phẩm.

Gửi bình luận: Gửi bình luận về sản phẩm đang xem, chức năng này chỉ được

thực hiện sau khi khách hàng đã đăng nhập. Các bình luận về sản phẩm cũng được liệtkê ra để khách hàng có thể xem, mua hàng - thêm vào giỏ hàng và tiến hành thanh toánsau khi đã đăng nhập.

Quản lý tài khoản:

Đăng ký: Đăng ký thành viên mới với vai trò là khách hàng, tức không được

phép sử dụng các chức năng trong phần quản trị.

Đăng nhập: Đăng nhập để có thể thực hiện được các chức năng: gửi bình luận,

đổi mật khẩu, cập nhật thông tin tài khoản, mua hàng, thêm sản phẩm vào giỏ,…

Đăng xuất: Chọn chức năng này để trở thành người dùng nặc danh, tức khơng

được phép gửi bình luận, đổi mật khẩu, cập nhật thông tin tài khoản, mua hàng, thêmsản phẩm vào giỏ,…

Đổi mật khẩu: Thay đổi mật khẩu khi cần thiết để đảm bảo độ bảo mật của mình,

mật khẩu được bảo mật để khơng ai được xem kể cả quản trị

</div>Trang 14<div class="page_container" data-page="14">

DỰ ÁN 1

THIẾT KẾ TRANG WEB

Quên mật khẩu: Tìm lại mật khẩu dựa vào tên đăng nhập và email. Sau khi xác

minh đúng sẽ gửi mật khẩu qua email đã đăng ký trước đó để đảm bảo độ bảo mật.

Cập nhật thơng tin tài khoản: Cập nhật lại thông tin tài khoản của mình (khơng

cho phép cập nhật tên đăng nhập)

1.3.1.2 Chức năng dành cho quản trị

Quản lý tài khoản khách hàng:

- Sử dụng để quản lý thông tin khách hàng và người quản trị. Yêu cầu của chứcnăng này là liệt kê danh sách khách hàng, xem thông tin chi tiết của mỗi khách hànghoặc xóa khách hàng khơng cần thiết.

- Thông tin của mỗi tài khoản gồm: mã đăng nhập, họ và tên, ảnh đại diện, mậtkhẩu đăng nhập, vai trò của người dùng (quản trị hay khách hàng), trạng thái, email, sốđiện thoại.

Quản lý danh mục:

- Chức năng quản lý danh mục, được sử dụng để quản lý thông tin danh mục.Yêu cầu của chức năng này là liệt kê danh sách danh mục, thêm danh mục, cập nhậthoặc xóa danh mục đã tồn tại.

- Thông tin của mỗi danh mục gồm: mã danh mục, tên danh mục, trạng thái.

Quản lý sản phẩm

- Chức năng quản lý sản phẩm, được sử dụng để quản lý thông tin chi tiết sảnphẩm. Yêu cầu của chức năng này là liệt kê chi tiết sản phẩm, thêm sản phẩm, cập nhậthoặc xóa sản phẩm đã tồn tại.

- Thông tin của mỗi danh mục gồm: mã sản phẩm, mã danh mục, tên sản phẩm,tên danh mục, giá, giảm giá, lượt xem, hình, ngày đăng, mô tả, đặc biệt, ngày thêm,trạng thái.

Quản lý tổng hợp – thống kê

- Chức năng tổng hợp – thống kê, được sử dụng để thống kê sản phẩm theo danhmục.

Trang 8

</div>Trang 15<div class="page_container" data-page="15">

- Yêu cầu của chức năng này là xem số liệu của từng sản phẩm theo danh mục.Giúp ta dễ hình dung và quan sát được tổng thể dưới dạng biểu đồ cột.

Quản lý gửi email: Chức năng gửi email, được sử dụng để gửi email cho khách

hàng để thông báo về các hoạt động trên website.

- Mã banner- Hình banner- Tiêu đề chính- Tiêu đề phụ

Sản phẩm

- Mã sản phẩm- Tên sản phẩm- Hình ảnh- Đơn giá- Mã danh mục- Tên danh mục- Ngày nhập- Mô tả sản phẩm

- Trạng thái đặc biệt. Những sản phẩm đặc biệt được hiện lên trang chủ và được trình bày với một định dạng khác.

- Số lượt xem. Để ghi nhận số lượt xem để đánh giá độ quan tâm của khách hàng.

Hình ảnh

Trang 9

</div>Trang 16<div class="page_container" data-page="16">

DỰ ÁN 1

Trang 10THIẾT KẾ TRANG WEB

- Mã hình ảnh- Mã sản phảm- Hình ảnh

Khách hàng

- Mã khách hàng- Mật khẩu đăng nhập- Họ và tên

- Địa chỉ- Số điện thoại- Email

- Vai trò: để phân biệt là quản trị hay người tiêu dùng.

Bình luận

- Mã bình luận- Nội dung

- Mã sản phẩm được bình luận- Mã khách hàng gửi bình luận- Thời gian gửi bình luận

Giỏ hàng

- Mã giỏ hàng- Mã user- Mã sản phẩm- Số lượng- Tên sản phẩm- Giá sản phẩm- Ảnh sản phẩm- Tổng tiền

Đơn hàng

- Mã đơn hàng- Mã khách hàng- Tổng giá trị đơn hàng- Phương thức thanh toán- Tên khách hàng- Địa chỉ- Email- Số điện thoại

</div>Trang 17<div class="page_container" data-page="17">

- Trạng thái

Thanh tốn

- Mã thanh tốn- Mã hóa đơn- Mã khách hàng- Tên sản phẩm- Số tài khoản

- Phương thức thanh toán- Số tài khoản người nhận- Ghi chú

- Thời gian thanh tốn- Trạng thái thanh tốn

Lịch sử hóa đơn

- Mã bảng- Mã hóa đơn- Mã sản phẩm- Giá sản phẩm- Số lượng sản phẩm

</div>Trang 18<div class="page_container" data-page="18">

PHẦN 2 THIẾT KẾ2.1 Mơ hình triển khai

Website giới thiệu sản phẩm của NEST MART & GROCERY sau khi hoàn thànhsẽ được triển khai theo mơ hình như sơ đồ sau:

Hình 2. 1 Sơ đồ Website giới thiệu sản phẩm của NEST MART & GROCERYThuê host có hỗ trợ php và mysql và triển khai website FURNITURE lên đó.Nhân viên quản trị vào website để quản lý.

Người tiêu dùng sử dụng trình duyệt web để truy cập, tìm kiếm và gửi bình luậnvề sản phẩm .

2.2 Thiết Kế CSDL

Dựa vào đặc tả thực thể và cụ thể làm việc với Pottery Ware, có thể thiết kế sơ đồquan hệ và chi tiết các thực thể để từ có có đủ thơng tin cài đặt CSDL lên MySQL.

2.2.1 Sơ đồ quan hệ thực thể.ERD Diagram level 2

</div>Trang 19<div class="page_container" data-page="19">

Hình 2. 2 ERD Diagram level 2

ERD Diagram level 3

Hình 2. 3 ERD Diagram level 3

</div>Trang 20<div class="page_container" data-page="20">

Yêu cầu ràng buộc quan hệ:

Khách hàng – Bình luận

Cascade: Khi thơng tin

của khách hàng thay đổi,những thay đổi này sẽđược tự động cập nhậtđồng thời cho tất cả cácbình luận liên quan củakhách hàng đó.

Cascade: Khi một khách

hàng bị xóa, tất cả các bìnhluận của khách hàng đócũng sẽ bị xóa.

Danh mục – Sản phẩm

Cascade: cơ sở dữ liệusẽ không thực hiện bấtkỳ hành động xóa nàotrên hàng chính khi cócác hàng phụ được thamchiếu đến.

No action: cơ sở dữ liệu sẽkhông thực hiện bất kỳhành động xóa nào trênhàng chính khi có các hàngphụ được tham chiếu đến.

Sản phẩm – Bình luận

Cascade: Khi thơng tin

của sản phẩm thay đổi,tất cả các bình luận liênquan đến sản phẩm đó sẽđược cập nhật.

Cascade: Khi một sản

phẩm bị xóa, tất cả các bìnhluận của sản phẩm đó cũngsẽ bị xóa.

Sản phẩm – giỏ hàng

Cascade: Nếu thông tin

của sản phẩm trong giỏhàng thay đổi, thì thơngtin giỏ hàng cũng sẽđược cập nhật.

Cascade: Khi một sản

phẩm trong giỏ hàng bịxóa, sản phẩm đó cũng sẽbị xóa khỏi giỏ hàng

Giỏ hàng – đơn hàng

Cascade: Nếu thông tin

về giỏ hàng thay đổi,đơn hàng tương ứngcũng sẽ được cập nhật.

Cascade: Khi một giỏ hàng

bị xóa, đơn hàng tương ứngcũng sẽ bị xóa

Đơn hàng – khách hàng

Cascade: Nếu thơng tin

đơn hàng thay đổi, thôngtin khách hàng liên quancũng sẽ được cập nhật

Set null: Khi một đơn hàng

bị xóa, thơng tin kháchhàng có thể được đặt thànhnull (giá trị rỗng).

Sản phẩm - ảnh sản phẩm

Cascade: Nếu thông tin

về sản phẩm thay đổi, tấtcả các ảnh sản phẩm liênquan sẽ được cập nhật

Cascade: Khi một sản

phẩm bị xóa, tất cả các ảnhsản phẩm của sản phẩm đócũng sẽ bị xóa.

2.2.2 Thiết kế chi tiết các thực thể

2.2.2.1 Category (Danh mục)

</div>Trang 21<div class="page_container" data-page="21">

Bảng 2. 1 Bảng category lưu thông tin danh mục có cấu trúc như sau:

id INT(10) AUTO_INCREMENTPK, NOT NULL, Mã loại hàng

Trạng thái loại hàng:0 - hiện thị1 - tắt

Trạng thái xóa loại hàng:0 – Hiện

1 - Ẩncreate_at TIMESTAMP NULL

update_at TIMESTAMP NULL

2.2.2.2 Products (Sản phẩm)

Bảng 2. 2 Bảng product lưu thông tin các các mặt sản phẩm có cấu trúc như sau:

id INT(10) PK, NOT NULL, AUTO_INCREMENT Mã hàng hóaid_category INT(10) PK, NOT NULL, Tựtăng Mã loại hàng

Trạng thái sản phẩm:0 - hiện thị1 - tắt

Trạng thái xóa sảnphẩm:

1 – Hiện2 - Ẩn

</div>Trang 22<div class="page_container" data-page="22">

2.2.2.3 User (Tài khoản)

Bảng 2. 3 Bảng user lưu thông tin của khách hàng

id INT(11) PK, NOT NULL, AUTO_INCREMENT Mã khách hàng

Trạng tháitài khoản: 0 - hiện thị1 - tắt

Trạng thái xóa tàikhoản:

1 – Hiện2 - Ẩncreate_at TIMESTAMP NULL

update_at TIMESTAMP NULL

2.2.2.4 Comment (Bình luận)

Bảng 2. 4 Bảng comment lưu thơng tin các bình luận của khách hàng về các sản phẩm có cấu trúc như sau:

id INT(10) PK, NOT NULL, AUTO_INCREMENT Mã bình luận

comment_date VARCHAR(50) NOT NULL Ngày bình luận

</div>Trang 23<div class="page_container" data-page="23">

2.2.2.5 Cart (Giỏ hàng)

Bảng 2. 5 Bảng cart dùng để lưu thông tin các giỏ hàng của khách hàng có cấu trúc như sau:

id INT(10) PK, NOT NULL, AUTO_INCREMENT Mã giỏ hàng

2.2.2.6 Bill

Bảng 2. 6 Bảng bill lưu thơng tin hóa đơn của người dùng có cấu trúc như sau:

id INT(10) AUTO_INCREMENTPK, NOT NULL, Mã bài đăngid_user INT(10) AUTO_INCREMENTFK, NOT NULL, Mã tài khoản

Payment_menthods TINYINT(4) NOT NULL tốn:Hình thức thanh

</div>Trang 24<div class="page_container" data-page="24">

1 – Thanh toán khinhận hàng2 – Thanh toánonline

Trạng thái đơnhàng:

0 – Đơn hàng mới1 – Đang xử lý2 – Đang giaohàng

3 – Đã giao hàng

2.2.2.7 Banner

Bảng 2. 7 Bảng banner lưu thông tin ảnh banner có cấu trúc như sau:

id INT(11) PK, NOT NULL, AUTO_INCREMENT Mã banner

Trạng thái banner: 0 – Hiện1 – Ẩn

Trạng thái xóa banner:0 – Hiện

1 - Ẩn

</div>Trang 25<div class="page_container" data-page="25">

2.2.2.8 Bill_detail (Lịch sử hóa đơn)

Bảng 2. 8 Bảng bill_detail lưu thông tin giỏ hàng của khách hàng có cấu trúc như

Mã lịch sử đơn

2.2.2.9 Payment (Thanh tốn)

Bảng 2. 9 Bảng payment lưu thơng tin thanh tốn của khách hàng có cấu trúc như

</div>Trang 26<div class="page_container" data-page="26">

Tên cộtKiểuRàng buộcGhi chú

ben_account_name VARCHAR(255) NOT NULL

</div>Trang 27<div class="page_container" data-page="27">

desription VARCHAR(255) NULL Ghi chú

thanh tốn

2.2.2.10 Images (Hình ảnh)

Bảng 2. 10 Bảng images lưu hình ảnh của sản phẩm có cấu trúc như sau:

AUTO_INCREMENT Mã hình ảnh

2.3 Thiết kế giao diện2.3.1 Sitemap

Website NEST MART & GROCERY được chia làm 2 phần dành riêng cho 2 đối tượng khác nhau là khách hàng - người dùng và nhân viên quản trị.

</div>Trang 28<div class="page_container" data-page="28">

Hình 2. 4. Site map

Phần Site: Đây là phần dành cho khách hàng, nó chứa các trang web chức năng

giúp người dùng tương tác như việc tìm kiếm, xem thơng tin hàng hóa hay gửi bìnhluận và quản lý tài khoản của mình.

Phần Admin: Đây là nơi dành cho nhân viên quản trị bao gồm các việc quản lý

trang web, thông kê dữ liệu.

Thêm: phần guess - dành cho người dùng chỉ vào xem trang web mà chưa

đăng nhập

2.3.2 Thiết kế phần quản trị

Giao diện web rất đa dạng và phong phú về độ thẩm mỹ. Bởi vậy phần nàychỉ hướng dẫn về mặc logic, người thực hiện được phép sáng tạo theo ý riêngmình.

Một vài lưu ý cần phải tuân thủ làm ảnh hưởng xuyên sốt quá trình làm dựán đó là đặt tên cho các thành phần trên form. Cần phải thực hiện đúng để saunày tích hợp mã php và mysql vào được thuận lợi.

</div>Trang 29<div class="page_container" data-page="29">

Trang đăng nhập Admin

Hình 2. 5 Trang đăng nhập Admin

Trang chủ

Hình 2. 6 Trang chủ

</div>Trang 30<div class="page_container" data-page="30">

Trang quản lý loại hàng

Hình 2. 7 Thêm mới

Hình 2. 8 Danh sách

</div>