Xây dựng trang web bán giày (Đồ án môn học lập trình trên web)

- Trang danh mục sản phẩm : Phân loại và liệt kê các sản phẩm theo thương hiệu như Nike, Adidas, Puma v.v., kèm bộ lọc vả sắp xếp.. - Trang chỉ tiết sản phẩm : Hiên thị chỉ tiết thông t

TRUONG DAI HOC NGOAI NGU - TIN HOC TP HO CHI MINH

KHOA CONG NGHE THONG TIN

XAY DUNG TRANG WEB BAN GIAY

(Dé an môn học Lập trình trên web)

GVHD : TS Trần Khải Thiện

Nhóm thực hiện: O†

Họ tên: Phan Đình Huy MSSV: 23DH111258

Họ tên: Phan Gia Huy MSSV: 23DH111260

TP Ho Chí Minh, ngay 14 thang 11 nam 2024

1 Giới thiệu đề tài 1

Tài liệu tham khảo 2

Bang phan công thành viên thực hiện đè tài 2

1 Giới thiệu đề tài

1.1 Tên đề tài

Thiết kế website bán giày

1.2 Giới thiệu tống quan

Mục đích của website là cung cấp một nền tảng trực tuyến cho khách hàng mua sắm giày thê thao Website này giúp người dùng dễ dàng tìm kiếm, so sánh, và mua san pham phù hợp Chúng tôi xây dựng Antony Shop với mục tiêu mang đến cho bạn trải nghiệm mua sam giày thê thao trực tuyến tiện lợi và thú vị nhất Tại đây, bạn không chỉ tìm được những đôi giày ưng ý mà còn khám phá thế giới giày thê thao đa dạng, cập nhật những xu hướng mới nhất Dự án tham khảo mô hình các trang thương mại điện tử hiện đại như Nike

và Adidas

1.3 Nội dụng

- Trang chú : Trang giới thiệu tông quan vẻ sản phâm nổi bật, khuyến mãi, và danh mục

chính

- Trang danh mục sản phẩm : Phân loại và liệt kê các sản phẩm theo thương hiệu như

Nike, Adidas, Puma v.v., kèm bộ lọc vả sắp xếp

- Trang chỉ tiết sản phẩm : Hiên thị chỉ tiết thông tin về sán phâm cụ thẻ, hình ánh, giá

- Trang tìm kiếm : Cho phép tìm kiếm sản phẩm theo từ khóa và bộ lọc kết quả

- Trang đăng ký,đăng nhập : Trang đăng ký và đăng nhập giúp người dùng tạo và truy cập tài khoản cá nhân

- Trang Admin : Trang chỉ dành cho admin (người quản trị website) quan lý toàn bộ

thông tin của khách hàng sử dụng website như tên tài khoản, mật khâu,số điện thoại,email,mua hàng , Quản lý hàng hoá trên web, thống kê doanh só,

2.2 Môi trường triển khai

- Công nghệ sử dụng:

HTML: Ngôn ngữ đánh dấu, dùng đề xây dựng cầu trúc cơ bán của trang web CSS: Ngôn ngữ mô tả, dùng đề định kiều cho HTML va tao giao diện đẹp mắt

JavaScript: Ngôn ngữ lập trình cho phía khách hàng, dùng để tạo tính năng

tương tác, động trên trang web

C# voi ASP.NET MVC

MySQL/PostgreSQL: Quan ly di ligu dudi dang bang, hé trợ các thao tác

CRUD (tao, doc, cập nhật, xóa)

Bootstrap: Framework gilip thiét ké giao dign responsive nhanh chóng Web server : Microsoft Internet Information Services (IIS)

2.4, Xdy dung giao dién

5 bao gid dn ming sau khi giao được những bức thư không? - Mario Balotelli

ANTONY

DANG CAP SANG TRONG

SHOP ANTONY mang những thứ tốt nhất cho cầu thủ chuyên nghiệp Những công nghệ tiên tiến, tối

ưu hóa trải nghiệm chơi bóng Các trang bị này không chỉ đẹp mắt mà còn có độ bền cao và hiệu suất

ổn định, đảm bảo bạn luôn sẵn sàng cho moi tran dau cing thang

“Your Love makes me strong , Your Hate makes me unstoppable” - Cristiano Ronaldo

DANH MUC SAN PHAM

cảm ơn Antony Shop đã m

Make America great again

Mezuno Vip Pro

MÔ TẢ : Predator, X Crazyfast va COPA Pure 2 adidas Copa Pure 2 ‘Solar Energy’ thé hign su tinh

Đặc biệt, phần đố giày màu đỏ rực, không chỉ làm nối bật tống thổ thiết kế mà còn tạo cảm giác mạnh mẽ, năng động

® Compa Antony

*h tt @0¿ sua bàng Giây đi rất sướng, xoay compa cực sướng

Nike Pro Max Plus 100

® Ronaldo WARK H O15 mua hang Mua giày 6 day giuip tdi tim kiém Penalty dé hon Puma Lord

CBR 20.40.0004

® LIONEL MESSI

*i w#t# @ 0á múa hàng Cảm ơn thương mại điện tử, cảm ơn Antony, Cảm ơn chúa đã tao ra web nảy để con có thể mua giảy ở đây, nó giúp tôi vô

Model: đại diện cho dữ liệu và logic nghiệp vụ, vi du: Product, User, Order

Các model này tương tác với cơ sở đữ liệu và chứa thông tin liên quan đến sản phẩm, người dùng vả đơn hàng

ProductTD { NamePro { Price {

public int Id { get; set; }

public string UserName { get; set; }

public string Password { get; set; }

public string Role { get; set; }

Hinh 2.5.2 : Model AdminUser

public class Category

public string NameCate { get; set; }

public virtual ICollection<Product> Products { get; set; }

i

eC Cer)

public CompanyDBContext() : base (

Orders { get; set; }

> Orderitens { get; set; }

pubLic DbSet <Product> Products { get; set; }

public DbSet <CartItem> CartItems { get; set;

public decimal Totalamount => Items.sum(item => item Total)

public int Idcus { get; set; }

public string NameCus { get; set; }

public string PhoneCus { get; set; }

public string PassCus { get; set; }

public string Emailcus { get; set; }

public string Role { get; set; }

Hinh 2.5.5 : Model Customer

pubLic virtuatL st<OrderItem> OrderItems { get; set; }

int OrderID { got; sot; }

virtual Order 0rder { get; set; }

public int ProductID { get; set; }

public decimal Total -> Price + Quantity;

Hinh 2.5.7 : Model Orderltem

ProductID {

)]

NamePro {

` Description {

View: là giao diện người dùng, biển thị dữ liệu từ Model Ví dụ: Trang sản pham,

giỏ hàng, thanh toán View chỉ chịu trách nhiệm hiện thị dữ liệu mà không xử lý logic.

›roduct-card._ _g Ề

Price.HasVatLue ? Price VaLue ToeString(

SaLe.HasVaLue && Sale > Price)

ViewModel được sử dụng đề:

> Đóng gói dữ liệu cần thiết cho View từ nhiều Model hoặc nguôn khác nhau

> Tách biệt logic hiến thị khỏi logic dữ liệu và xử ly

Cải thiện khả năng kiêm soát, bảo trì và kiêm thử trong ứng dụng MVC

ViewModel

3 Kết luận

3.1 Kêt quả đạt được

HộiFanJ97 TrờthànhlACK97 TẢi/gđựng - Kếtnối

SHOP ANTONY

Š bao giờ ăn mừng sau khi giao được những bức thư không? - Mario Balotelli

ANTONY

DANG CAP SANG TRONG

SHOP ANTONY mang những thứ tốt nhất cho cầu thủ chuyên nghiệp Những công nghệ tiên tiến

ưu hóa trải nghiệm chơi bóng Các trang bị này không chỉ đẹp mắt mà còn có độ bền cao và hiệu suất

ổn định, đảm bảo bạn luôn sẵn sàng cho mọi trận đấu căng thẳng

Hình 3.1.1: Giao điện chính của WEBSITE

HST TiếgVIỆW Dine ky ĐắngNhập

me

Login

Tén dang nha

Mật khẩu

Log In Chưa có tài khoản? Sign Quay vẻ trang chủ

Puma Puma Ultra Pro Phong cach báo nhả, mạnh mẽ và day ldicudn 4.500.000 79080000 TpHem, 33

Cage AG Phù hợp với lối chơi như Neymar - đảo chân, d ở sở 1

gắp bóng, vô bệnh viện

Mizuno Nhật bốn, tỉnh tế và đây ưu tụ 999999 79080000 TpHem, 12

đ d cơ sở Ï Nik Hòa mình vào không kỲ J của mùa giải 1950000 2345

Champions Leaque, Nike chin cramatbé

mpions League, đây ack sản

ng cầu thú đại sứ thi dau

Hinh 3.1.3: Giao điện tao sản pham cua Admin

Hình 3.1.4: Giao điện giỏ hàng

Hội FanJ97 TrởthànhJACK97 Tảiứngdựng Kếtnối HỒJợ Tiếng ViệtW ĐăngXý Đăng Nhập

'ề Trang chủ / Nike / Nike Air Zoom Mercurial Superfly 9 Academy TF Peak

Nike Air Zoom Mercurial Superfly 9 Academy TF Peak 79-086-006-d

1.950.000 d

Drea

phẩm dành cho những cầu thủ đại sứ thi đấu tại giải đấu hấp dẫn nhất hành tỉnh nay

Về San Pham Cua ANTONY SHOP

Hình 3.1.5: Giao diện chỉ tiết sản phẩm

DANH MYC SAN PHAM

2 ricon Hai Phong 09872123 19/11/2024 18.000.000đ

Hinh 3.1.9: Giao dién tao thém danh muc

Index

Phong cách báo nhà, mạnh mẽ và đầy lôi cuốn Phù hợp với lối chơi

như Neymar - đảo chãn, gắp bóng, vô bệnh viện

Nhật bốn, tỉnh tế va day ưu tú

Hòa mình vào không khí sôi động của mùa giải Champions League,

Nike chính thức ra mắt bộ sưu tập ‘Peak Ready’ vao hém nay (16/10)

với tất cd 4 silo: Mercurial Tiempo, Phantom GX va Phantom Luna lay

cảm hứng từ chủ đề Champions League Hyper Turq/Black/Fuchia

Dream/White la phéi mau danh cho những trận đấu ở UEFA

Champions League, đây là pack sản phẩm dành cho những cầu thủ

đại sứ thi đấu tại giải đấu hấp dẫn nhất hành tỉnh này

Predator, X Crazyfast va COPA Pure 2 adidas Copa Pure 2 ‘Solar

Energy’ thé hién sy tinh x40 qua màu sắc chủ đạo là trắng kem, điểm

nhấn bởi logo ba sọc màu đen nối bật của adidas Đặc biệt, phần đế

cảm giốc mạnh mẽ, năng đông

Puma vừa hé lộ bản phối màu mới cho đồng giày tốc 49 Ultra 5,

thuộc bộ sưu tập "Formula" Phiên bản Ultra 5 *Formula" hứa hẹn sẽ

Delete

Edit | Details | Delete

Edit | Delete

Edit |

[ee

Thống kê sản phẩm bán ra

Ngày thống kê: 19/11/2024

Số lượng bản trong ngãy: 11

Tổng doanh thu trong ngäy: 38 999.997 VN

Ngưỡi mua nhiều nhất: ricor:

Số lượng bán trong ngày: 1 ¡

Tống doanh thu trong ngày: 38.999.997 VN:

Người mua nhiều nhất: ricon

“Thống kê số lượng và đoan thu sản phẩm

BE S65 wong cán DEEBI Xông ennntnreve)

Puma Unra Pro Cage AG

3.2 Hướng phát triển ¬

- Gợi y sản phâm thông minh: Sử dụng AI đê đề xuất sản phâm dựa trên hành vi người

dùng

- Phat trién ứng dụng di động: Xây dựng app cho iOS va Android dé tiện lợi hơn khi

mua săm qua điện thoại

- Hé tro đa ngôn ngữ và tiền tệ: Thêm giao diện đa ngôn ngữ và nhiều loại tiền tệ nhằm thu hút khách hàng quôc tê

- Đánh giá sản phẩm: Cho phép người dùng đánh giá và bình luận để tăng độ tin cậy

- Thanh toán đa dạng: Hỗ trợ nhiều phương thức thanh toán như ví điện tử và PayPal

- Da dạng hóa sản phẩm, cập nhật thêm nhiều mẫu giày mới trên thị trường hiện nay nhăm thu hút khách hàng

Tài liệu tham khảo