L I NÓI ĐẦẦUỜChào quý khách hàng yêu thương của Shop Giày Đẹp!Chúng tôi xin gửi lời chào trân trọng và chân thành nhất đến tất cả những khách hàng đam mê và đang tìm kiếm đôi giày hoàn h
Trang 1BÁO CÁO MẪẪU – NGÀNH THIẾẾT KẾẾ WEBSITE
Giáo viên hướng dẫẫn: Cô Nguyễễn Th Thanh Xuânị
Sinh viên th c hi n:ự ệ PS31203_LÊ ANH KHOAL p: ớ WD18316
TPHCM, 09/2023
Trang 2L I NÓI ĐẦẦUỜ
Chào quý khách hàng yêu thương của Shop Giày Đẹp!
Chúng tôi xin gửi lời chào trân trọng và chân thành nhất đến tất cả những khách hàng đam mê và đang tìm kiếm đôi giày hoàn hảo cho bản thân mình.
Shop Giày Đẹp tự hào giới thiệu trang web bán hàng của chúng tôi - nơi mà
chúng tôi mang đến cho quý khách hàng sự kết hợp hoàn hảo giữa phong cách, thoải mái, năng động và chất lượng.
Với niềm đam mê và sứ mệnh của chúng tôi, Shop Giày Đẹp đã chọn những
đôi giày tốt nhất để mang đến cho quý khách hàng một trải nghiệm đầy tự tin và thoải mái Chúng tôi hiểu rằng một đôi giày không chỉ đơn giản là một vật để sử dụng, mà còn là một phần quan trọng của phong cách cá nhân và cảm giác tự tin của quý khách hàng.
Trang web Shop Giày Đẹp tự hào giới thiệu một bộ sưu tập đa dạng các loại
giày chất lượng cao, từ giày thể thao đến giày công sở và giày đi biển Chúngtôi cam kết chọn lọc kỹ càng từ các nhà sản xuất uy tín để đảm bảo rằng quýkhách hàng thân yêu sẽ nhận được những sản phẩm tốt nhất, đồng thời sẽ trải nghiệm sự thoải mái và độ bền của những đôi giày của chúng tôi.
Khi đến với Shop Giày Đẹp, quý khách hàng sẽ được đón tiếp bởi đội ngũ
nhân viên tận tâm và giàu kinh nghiệm Chúng tôi luôn sẵn sàng hỗ trợ quý khách hàng trong việc chọn lựa và tư vấn mọi vấn đề liên quan đến sản phẩm Chúng tôi hiểu rằng mỗi người đều có những nhu cầu và phong cách riêng, vì vậy chúng tôi sẽ cùng quý khách hàng tìm ra đôi giày phù hợp nhất với sở thích và phong cách cá nhân.
Chúng tôi tin rằng sự đa dạng trong sản phẩm sẽ giúp khách hàng tìm thấy một món quà độc đáo hoặc một kỷ niệm có dấu ấn cho bản thân và gia đình
của quý khách hàng Chúng tôi hy vọng khi đến với Shop Giày Đẹp, quý
khách hàng sẽ có những trải nghiệm mua sắm tốt nhất và tìm thấy đôi giày ưng ý nhất cho mình.
Chúng tôi xin cam đoan rằng trang web Shop Giày Đẹp sẽ mang đến cho
quý khách hàng trải nghiệm mua sắm trực tuyến dễ dàng, an toàn và nói không với lừa đảo Chúng tôi luôn đặt sự hài lòng của khách hàng lên hàng đầu và cam kết cung cấp dịch vụ khách hàng tận tâm nhất và chất lượng tốt nhất.
Cuối cùng, chúng tôi xin chân thành cảm ơn tất cả quý khách hàng thân yêu
đã tin tưởng và lựa chọn Shop Giày Đẹp Mong rằng quý khách hàng sẽ tìm
thấy đôi giày ưng ý nhất và trên hết là cảm thấy thoải mái và tự tin với mỗi bước chân trong cuộc sống của mình.
Trang 3Chúc quý khách hàng thân yêu có những trải nghiệm mua sắm vui vẻ tại
trang web Shop Giày Đẹp!
Trang web Shop Giày Đẹp xin trân trọng cảm ơn!
Trang 4Too long to read onyour phone? Save to
read later on yourcomputer
Save to a Studylist
Trang 51 PHẦNTÍCH
1.1 HI NỆTR NGẠ (Đ T VẦẤN ĐỀẦ)Ặ *
Shop Giày Đẹp là một cửa hàng bán giày cũ, kinh doanh đa dạng các mặt hànggiày khác nhau Hiện cửa hàng chưa có website giới thiệu các sản phẩm đến ngườitiêu dùng và đối mặt với sự cần thiết của việc có một nền tảng trực tuyến cho phépngười tiêu dùng đặt hàng Khách hàng có tài khoản tại trang web mới được đặthàng Thêm một lí do là cửa hàng cũng cần thu nhận được các phản hồi từ ngườitiêu dùng về các sản phẩm để nhanh chóng cải tiến và nâng cao chất lượng nhằmphục vụ khách hàng ngày một tốt hơn Vì vậy Shop Giày Đẹp quyết định xây dựngwebsite là để cung cấp cho khách hàng một cách tiện lợi để duyệt và mua các sảnphẩm của họ mọi lúc, mọi nơi Không chỉ vậy, website còn giúp họ tiết kiệm thờigian, tăng tính cạnh tranh và tạo cơ hội tiếp cận một lượng khách hàng lớn hơn.Vìv yậ shoes old quyêốt đ nh xẫy d ng website là đ cung cẫốp cho khách hàng m t cách ti n l i đ duy tị ự ể ộ ệ ợ ể ệvà mua các s n ph m c a h m i lúc, m i n i Khống ch v y, website còn giúp h tiêốt ki m th i gian,ả ẩ ủ ọ ọ ọ ơ ỉ ậ ọ ệ ờtăng tính c nh tranh và t o c h i tiêốp c n m t lạ ạ ơ ộ ậ ộ ượng khách hàng l n h n.ớ ơ
1.2 YỀUCẦẦUHỆTHỐẤNG
Shop Giày Đẹp mong muốn có một website nhằm giới thiệu sản phẩm, bán cácmặt hàng online và thu nhận ý kiến của người tiêu dùng về các sản phẩm đang kinhdoanh Website cũng có các chức năng cho người quản trị để họ có thể quản lý sảnphẩm, phân loại sản phẩm, quản lý khách hàng, quản lý các bình luận từ kháchhàng về các sản phẩm cũng như thống kê hàng hóa theo loại…
Yêu cầu cụ thể được đặt ra như sau:
Website bán hàng dành cho người tiễu dùng
o Cẫốu trúc chúng c a tẫốt c các trang web trong website ph iủ ả ả
▪ Ch a danh m c lo i hàng hóa đ khách hàng dêẫ dàng tìm kiêốm hàng hóa theoứ ụ ạ ểt ng lo iừ ạ
▪ Tìm kiêốm hàng hóa theo tên
▪ Hi n th danh sách các m t hàng đ c quan tẫm nhiêầu nhẫốt (xem nhiêầu nhẫốt)ể ị ặ ượ▪ Đăng nh p/thống tin ngậ ười tiêu dùng sau khi đã đăng nh pậ
o Trang chính c a websiteủ
Tr ng bày các m t hàng đ c bi t đư ặ ặ ệ ược nhẫn viên qu n tr ch đ nh Các m t hàng đ cả ị ỉ ị ặ ặbi t có th đệ ể ược trình bày theo cách nào đó sao cho dêẫ nhìn (có th s d ngể ử ụslideshow)
o Trang tr ng bày tẫốt c m t hàngư ả ặ
Khi ng ười dùng ch n lo i hàng ho c tìm kiêốm theo tên thì danh sách hàng hóa th aọ ạ ặ ỏmãn yêu cẫầu đ ược hi n ra Mốẫi m t hàng cẫần hi n th hình nh, tên, đ n giá và ( gi mệ ặ ể ị ả ơ ả
Trang 6giá nêốu có ) Khi ng i dùng nhẫốp vào hình c a hàng hóa thì seẫ chuy n đêốn trang hi nườ ủ ể ểth chi tiêốt hàng hóa đốầng th i tăng sốố lẫần xem.ị ờ
o Chi tiêốt hàng hóa
Yêu cẫầu c a trang web này nh sauủ ư
▪ Thống tin chi tiêốt c a m t hàng đ c ch nủ ặ ượ ọ▪ Mốẫi m t hàng có danh sách hình nh (gallery).ặ ả▪ Danh sách các m t hàng cùng lo i v i m t hàng đ c ch nặ ạ ớ ặ ượ ọ▪ Cho phép khách hàng g i bình lu n vêầ s n ph mử ậ ả ẩ▪ M t sốố thống tin đ liên h tr c tiêốp cho ngộ ể ệ ự ười báno Các trang qu n lý tài kho n s d ngả ả ử ụ
▪ Đăng nh pậ▪ Đăng ký▪ Quên m t kh uậ ẩ▪ Đ i m t kh uổ ậ ẩ
▪ C p nh t thống tin tài kho nậ ậ ả
✔ Website bán hàng dành cho người qu n trảị
o Các trang qu n lýả
Các trang này cẫần được trang b các ch c năng xem, thêm, xóa, s a, tìm kiêốm và phẫnị ứ ửtrang m t cách h p lýộ ợ
▪ Qu n lý hàng hóaả▪ Qu n lý lo i hàngả ạ▪ Qu n lý khách hàngả▪ Qu n lý bình lu n ả ậ▪ Qu n lý đ n hàngả ơ
o T ng h p thốống kêổ ợ
▪ Thốống kê hàng hóa theo lo i, cho phép hi n th d i d ng bi u đốầạ ể ị ướ ạ ể▪ Thốống kê bình lu n theo hàng hóaậ
▪ Thốống kê đ n hàngơ▪ Thốống kêố doanh thu
✔ Yễu câầu vễầ b o m tảậ
o Tẫốt c các form nh p ph i đả ậ ả ược ki m soát d li u m t cách h p lýể ữ ệ ộ ợ
o Khách hàng ch a đăng nh p khống đư ậ ược phép g i bình lu n vêầ hàng hóa cũng nh đ iử ậ ư ổm t kh u, c p nh t thống tin tài kho nậ ẩ ậ ậ ả
o Ch có các nhẫn viên qu n tr m i đỉ ả ị ớ ược phép th c hi n các ch c năng qu n trự ệ ứ ả ịo Khách hàng là viên có th đ t hàng ể ặ
✔ Yễu câầu vễầ môi trường công nghệ
o Website ph i đả ược xẫy d ng v i PHP và MySQLự ớo Kêốt h p v i javascript, ajaxợ ớ
Trang 7- Form đăng nh p ho c thống tin khách hàng sau khi đã đăng nh p ậ ặ ậ
- 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 n tr ậ ể ị ả ị
Trang 8✔ Tìm hàng theo lo iạ
- Li t kê các m t hàng theo lo i đệ ặ ạ ược ch n b i khách hàng ọ ở- Thống tin mốẫi m t hàng gốầm tên, nh và đ n giá (gi m giá nêốu có).ặ ả ơ ả- Liên kêốt đêốn trang chi tiêốt hàng hóa khi click vào nh ả
✔ Tìm hàng theo tễn
- Li t kê các m t hàng theo tên hàng ho c tên lo i theo yêu cẫầu tìm kiêốm c a khách hàng ệ ặ ặ ạ ủ- Thống tin mốẫi m t hàng gốầm tên, nh và đ n giá ặ ả ơ
- Liên kêốt đêốn trang chi tiêốt hàng hóa.
✔ Xem thông tin chi tiễết
- Hi n th thống tin chi tiêốt c a m t hàng để ị ủ ặ ược ch n b i khách hàng và các m t hàng cùng lo iọ ở ặ ạcó găốn liên kêốt đêốn trang chi tiêốt hàng hóa đ khách hàng có th xem luốn mà khống cẫần ph iể ể ảtr l i trang li t kê hàng hóa Trang chi tiêốt còn có th có thống tin vêầ n i bán đ khách hàng cóở ạ ệ ể ơ ểth liên hê ho c đêốn tr c tiêốp c a hàng.ể ặ ự ử
o 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)ậ ậ ạ ả ủ ậ ậ ậ- Danh sách đã comment
- Danh sách đ n hàngơ1.3.1.2 Dành cho qu n trả ị
✔ Qu n lý hàng hóaả
Th c hi n đự ệ ược các ch c năng xem, thêm, xóa, s a và phẫn trang.ứ ử
Trang 9T ng h p các bình lu n c a khách hàng t ng hàng hóa, thống tin t ng h p có cẫốu trúcổ ợ ậ ủ ừ ổ ợ
Tễn hàng hóaSôế bình lu nậNgày m i nhâếtớNgày cũ nhâết
Hi n th chi tiêốt các bình lu n vêầ m t hàng để ị ậ ặ ược ch n và cho phép xóa các bình lu n khống phùọ ậh p.ợ
✔ T ng h p - thốống kê hàng hóaổ ợ
T ng h p thống tin hàng hóa t ng lo i hàng Thống tin t ng h p cẫần đổ ợ ừ ạ ổ ợ ược trình bày có cẫốu trúcsau
Lo i hàngạSôế hàng hóaGiá trung bìnhGiá thâếp nhâếtGiá cao nhâết
Hi n th bi u đồồ hình miếến theo t l sồế lể ị ể ỷ ệ ượng c a t ng lo i.ủ ừ ạ
1.3.2 Đ c t các th c thặ ảựể
Sau đẫy là đ c t các th c th và thu c tính c a chúng cẫần thiêốt cho vi c xẫy d ng website Shoes Old.ặ ả ự ể ộ ủ ệ ự
✔ Danh m c hàngụo Mã danh m cụo Tên danh m cụ
o Săốp xêốp theo th t m t hàng ( theo ý khách hàng )ứ ự ặ
✔ S n ph mả ẩo Mã s n ph mả ẩo Tên s n ph mả ẩo Hình nhảo Đ n giáơ
o Giá khuyêốn mãi (tính theo %)o Ngày t o hàngạ
Trang 10o Sốố l ượt xem Đ ghi nh n sốố lể ậ ượt xem đ đánh giá đ quan tẫm c a khách hàng.ể ộ ủo Mã danh m cụ
✔ Khách hàng
o Mã khách hàng o M t kh u đăng nh pậ ẩ ậo H và tên (tên đăng nh p)ọ ậo Hình nhả
o Emailo Sốố đi n tho iệ ạo Đ a chị ỉ
o Tr ng thái kích ho t Nh ng ngạ ạ ữ ười dùng đã được kích ho t m i đạ ớ ược đăng nh p vàoậwebsite
o Vai trò Đ phẫn bi t là qu n tr hay ngể ệ ả ị ười tiêu dùng.o Mã s n ph mả ẩ
o Mã hóa đ nơ
✔ Nhẫn viên
o Mã nhẫn viêno H và tênọo Sốố đi n tho iệ ạo Hình nhả
o Mã s n ph m ( Ngả ẩ ười bán s n ph m )ả ẩ
✔ Hóa đ n ( Xuẫốt hóa đ n khi khách hàng mua hàng )ơ ơo Mã hóa đ nơ
o Tên s n ph mả ẩo Tên khách hàngo Ngày mua hàngo T ng tiêầnổo Ghi chú
o Mã hóa đ n chi tiếếtơ
✔ Hóa đ n chi tiêốt ( Qu n tr ki m soát đ thốống kê hàng hóa )ơ ả ị ể ểo Mã chi tiêốt hóa đ nơ
o Mã hóa đ nơo Mã nhẫn viêno Mã khách hàngo Mã s n ph mả ẩo Ngày mua hàng
o T ng tiêần ( theo t ng hóa đ n đổ ừ ơ ược xuẫốt )
✔ Bình lu nậo Mã bình lu nậo N i dungộ
Trang 11o Mã s n ph m đả ẩ ược bình lu nậo Mã khách hàng g i bình lu nử ậo Th i gian g i bình lu nờ ử ậo Mã s n ph mả ẩ
Trang 122.2 THIỀẤTKỀẤ
2.2.1 Thiễết kễế giao di nệ (figma)
2.2.1.1 Trang ch (hình ch p file figma kèm link đã public - 1 trang)ủ ụ
2.2.1.2 Trang con (hình ch p file figma kèm link đã public - 1 trang)ụ
Trang 132.2.2.2 ERD Diagram level 2
Yêu cầầu ràng bu c quan h :ộệ
Trang 14✔ Khách hàng – Bình lu n:ậ
o Update: cascade, Delete: No Action✔ Lo i – Hàng hóaạ
o Delete: Cascade✔ Hàng hóa – Bình lu nậ
sethome BIT(1) DEFAULT 0 Danh m c xuẫốt hi n trangụ ệchủ
2.2.3.2 Hàng hóa
B ng hang_hoa l u thống tin các các m t hàng có cẫốu trúc nh sauả ư ặ ư
id INT(9) PK, NOT NULL, T tăngự Mã hàng hóa
price DOUBLE (10,0) NOT NULL Đ n giáơgiam_gia FLOAT NOT NULL M c gi m giáứ ả
dac_biet BIT NOT NULL, DEFAULT 0 Tr ng thái đ c bi tạ ặ ệso_luot_xem INT(4) DEFAULT 0 Sốố lượt xem
Trang 15idcata INT(4) FK, NOT NULL Mã lo iạ2.2.3.3 Khách hàng
B ng khach_hang l u thống tin ngả ư ười dùng gốầm c ngả ười tiêu dùng và nhẫn viên qu n tr có cẫốu trúcả ịnh sauư
ma_kh VARCHAR(20) PK, NOT NULL Mã đăng nh pậmat_khau VARCHAR(50) NOT NULL M t kh uậ ẩho_ten VARCHAR(50) NOT NULL H và tênọkich_hoat BIT NOT NULL Tr ng thái kích ho tạ ạhinh VARCHAR(50) NOT NULL Tên hình nhảemail VARCHAR(50) NOT NULL Đ a ch emailị ỉvai_tro BIT NOT NULL Vai trò, true là nhẫn viên
S đôầ database ơ (ch p phầần design trong phpMyAdminụ )
Trang 162.3 GIAODI NỆWEBSITE2.3.1 Sitemap
Website xshop đ ược chia làm 2 phẫần dành riêng cho 2 đốối tượng khác nhau là khách hàng và nhẫn viênqu n tr ả ị
• Phẫần Site: dành cho khách hàng ch a các trang web ch c năng giúp khách hàng dêẫ dàng tìmứ ứkiêốm hàng hóa mình cẫần, xem thống tin, g i bình lu n và qu n lý tài kho n c a mìnhử ậ ả ả ủ• Phẫần Admin: dành cho nhẫn viên qu n tr gốầm các trang web qu n lý, thốống kê d li u.ả ị ả ữ ệ
Trang 172.3.2.1 Cấấu trúc chung (layout)
2.3.2.2 Trang chủ
2.3.2.3 Trang qu n lý lo i hàngả ạ
Trang 192.3.2.4 Trang qu n lý hàng hóaả
Trang 202.3.2.5 Trang qu n lý khách hàngả
Trang 212.3.2.6 Trang t ng h p và qu n lý bình lu nổ ợ ả ậ
Trang 222.3.2.7 Trang t ng h p thốấng kếấ hàng hóaổ ợ
Trang 232.3.3 Thiếết kếế phầồn khách hàng
2.3.3.1 Cấấu trúc chung (layout)
Trang 242.3.3.2 Trang chủ
2.3.3.3 Trang hàng hóa
Trang 252.3.3.4 Trang chi tiếất hàng hóa
Trang 262.3.3.5 Trang đăng ký
Trang 282.3.3.6 Trang đăng nh pậ
Trang 292.3.3.7 Trang đ i m t kh uổ ậ ẩ
2.3.3.8 Trang quến m t kh uậ ẩ
Trang 302.3.3.9 Trang c p nh t tài kho nậ ậ ả
- Function kêốt nốối database
- Function th c thi cẫu l nh SQL (thêm, s a, xóa, search, show, …)ự ệ ử
Trang 31- Các function tương tác v i b ng danh m c s n ph mớ ả ụ ả ẩ- Các function tương tác v i b ng s n ph mớ ả ả ẩ- Các function t o gi hàng, đ n hàngạ ỏ ơ- Các function tương tác v i tài kho nớ ả- Các function vêầ bình
3.2 Code Admin
- Trang qu n lý danh m c (xem demo)ả ụ- Trang qu n lý s n ph m (xem demo)ả ả ẩ- ….
3.3 Code User- Trang ch (demo)ủ- Trang danh m c (demo)ụ- Trang s n ph m (demo)ả ẩ- …
4 KI MỂLỐỖI
4.1.1 thốống nhẫốt màu
Màu tiêu trang trang liên h , tiêu đêầ saiệ not pass
fix l i màu gióng trangạch , trang gi i thi uủ ớ ệM t kh uậ ẩ Ít nhẫốt t 8 ký tr lên v i ký t inừ ở ớ ự
hoa in thương, kí t đ t ph iự ặ ả
4.1.2 thốống nhẫốt vêầ size4.1.3 thốống nhẫốt vêầ element
Trang 32ph iả
H và tênọ Khống đ trốốngể
Ch ch a alphabet và ký t trăốngỉ ứ ựEmail Khống đ trốốngể
Đúng đ nh d ng emailị ạ
4.5 KI MỂLỐỖI FORM QU NẢLÝLO IẠHÀNG
Tên lo iạ Khống đ trốốngểKhống trùng tên
4.6 KI MỂLỐỖI FORM QU NẢLÝ HÀNG HÓA
Tên hàng hóa Khống đ trốốngểĐ n giáơ Khống đ trốốngểPh i là sốố dả ươngGi m giáả Khống đ trốốngể
Ph i là sốố t 0 đêốn 1ả ừNgày nh pậ Trước ngày hi n t iệ ạ
4.7 KI MỂLỐỖI FORM ĐĂNGNH PẬ
Trang 33Tên đăng nh pậ Khống đ trốốngể
4.8 KI MỂLỐỖI FORM ĐĂNG KÝ
Tên đăng nh pậ Khống đ trốốngể passH và tênọ Khống đ trốốngể passEmail Khống đ trốốngể
5 ĐÓNGGÓI VÀTRI NỂKHAI
✔ Đăng ký host free / có phí: … ✔ Upload website lên host: trang web
✔ Export database t local và import lên host, c p nh t l i database, username và password.ừ ậ ậ ạ✔ Đăng ký domain
✔ Tr domain vào hostỏ✔ Các cách upload web
o Cpanel c a hosting (ch p màn hình)ủ ụ
Trang 34o S d ng tool upload (ch p màn hình)ử ụ ụ✔ trang web: …