tiểu luận lập trình web website giới thiệu bán quần áo trực tuyến

WEBSITE GIỚI THIỆU BAN QUAN AO TRUC TUYEN

Nganh: CONG NGHE THONG TIN Chuyén nganh: KY THUAT PHAN MEM Giảng viên hướng dẫn: ĐINH HOÀNG GIA Sinh viên thực hiện: PHẠM PHAN MINH TRIẾT MSSV: 2104110077

Lớp: KISDCPM02

TP Hồ Chí Minh, tháng 12 năm 2023

Khoa/Viện:

NHAN XET VA CHAM DIEM CUA GIANG VIEN

TIEU LUAN MON: LAP TRINH WEB

1 Hog va tên sinh viên: Phạm Phan Minh Triết

Tên đề tài: Website giới thiệu, bán quần áo trực tuyến 2 Nhận xét:

a) Những kết quả đạt được:

3 Điểm đánh giá (/heo thang điểm 10, làm tròn đến 0.5):

Simh Viens eee cence cee ce cne en eee eee cee eee een eee ane seve eenneeanettceetuseeeeneeres Điểm số: Điểm chữ: cece ee eevee 211 211 n1 nh nh Hy nà Hư

1P HCM, ngày tháng năm

Giảng viên châm thi (Kỹ và ghi rõ họ tên)

III.Triên khai giao diện - 55-5 St ST 2 211221221 122 112121211 n rung 21 ii cr 20 2 ccc cecsescccceceesscccccenerssccccestssssecescensseseceenetsssesevstsassersretteenseaseeaea 21 1.1.G1ao diện Home Page G0 1011011 1 911011111111 1112112 1111111011111 1881 11 eo 21 IV Con 0y v0 nƯầAâđ 21

1.3.Giao n0 nh Ồ 22

1.4.G1ao diện Login Page c2 n2 v 1191 10111111111 1111111011111 11 011111 011 111kg vn 23 PC s20 0n na 24

PC Go 0y na 24

¡3< cecccccccccssecsecseesssssessesssessesssesessresresassesesscsesessssresessasesiesssesietessressnsseseesesseseeseteess 27

Lời nói đầu

Trong thời đại ngày nay, sự phát triển của công nghệ thông tin đã mở ra những cánh cửa mới, tạo nên những trải nghiệm mua săm độc đáo và thuận tiện Trong số đó, việc mua sắm trực tuyến đã trở thành một xu hướng không thé phu nhan, dac biét là khi chúng ta nói đến lĩnh vực thời trang Trong bối cảnh đó, việc nghiên cứu và thảo luận về các website bán quần áo trực tuyến không chỉ là cần thiết mà còn là hết sức hap dan

Trong bài tiêu luận này, chúng ta sẽ cùng nhau khám phá và phân tích sâu hơn về cách các website bán quần áo đã và đang thay đôi cách mà chúng ta tiếp cận và trải nghiệm thế giới thời trang Từ việc thiết kế website, trải nghiệm người dùng, đến ảnh hưởng của chúng đối với thị trường thời trang trực tuyến, chúng ta sẽ đi sâu vào các khía cạnh quan trọng nhất của chủ đề này

Hãy cùng nhau bắt đầu hành trình khám phá thế giới đầy màu sắc và đa dạng của những "địa chỉ thời trang" trực tuyến qua các trang web bán quân áo, nhằm hiểu rõ hơn về tầm ảnh hưởng của chúng đối với cuộc sống hàng ngày và sự biến đổi không ngừng của thị trường thời trang hiện đại

L- Giới thiệu 1.Hiện trạng và yêu cầu

- _ Ảnh Hưởng Của Mạng Xã Hội: Mạng xã hội đóng vai trò quan trọng trong

quá trình quyết định mua sắm, với người tiêu đùng tìm kiếm ý kiến và hình ảnh

- Chuyên Động Hướng Tới Bền Vững: Sự chú ý đặc biệt vào vấn đề bền vững trong ngành thời trang, với các trang web cung cấp thông tin chi tiết về nguồn gốc và quy trình sản xuất

- Thách Thức Từ Mô Hình "Fast Fashion”: Mô hình "fast fashion" đang đối

mặt với phê phán về tác động tiêu cực đến môi trường và quyền lợi lao động,

khuyến khích chuyến đổi sang mô hình bền vững

2.Công nghệ sử dụng trong dự án

2.1.Front-end

Sau khi nhận thấy giao diện hiện nay phải đáp ứng đủ các yếu tố như: tải nhanh nội dung nhanh, giao điện đẹp và tối ưu trải nghiệm người dùng Về phía giao diện trang người dùng lẫn trang quản lý của admin, nhóm em sé su dung Nextjs và Tailwindcss

CLE XT ss H.1.1.Logo Nextjs

2.1.2.Tailwindess la gi?

Tailwindcss la mét utility-first CSS framework, no ciing giéng nhu Bootstrap, nd có những class built-in mà chúng ta có thể đùng Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trong, chúng ta có thể đễ đàng mở rộng tạo mới ra những class bằng chính những class của nó Sử dụng Tailwind giúp chúng ta tiết kiệm kha khá nhiều thời gian trong việc tạo layout

a 4 —

H.1.2.Logo Tailwind CSS

2.2.Back-end

Về phia Back-end, nhom em sẽ sử dụng Node1S đề phát triển vì đây là một môi

trường phát triển và triển khai API một cách nhanh chóng và đễ dàng Cụ thê ở đây

tụi em sẽ sử dụng một thư viện của Node]S đó là ExpressJS

2.2.1.ExpressJS là gi?

Expressjs là một #amework được xây đựng trên nên tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ đề phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP va midleware tao ra API vô củng mạnh mẽ và dễ sử dụng

Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở đữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng đề lưu đữ liệu thì với MongoDB chúng ta sẽ dùng khai niém 1a collection thay vi bang

Thông tin liên quan được lưu trữ cùng nhau đề truy cập truy vẫn nhanh thông qua ngôn ngữ truy vẫn MongoDB

+ Collection Products: collection nay sé chira thong tin cua producy nhu: title, description, price

+ Collection Carts: collection nay sé la noi luu triét dir ligu giỏ hang của khách hàng bao gồm các thông tin nhw: cart userId, cart products, cart id,

{

+ product_id: Objectid + quantity: number } ]

+ thumbnail: string + gallery: string] + hotProduct: boolean + inventory: number + sold: number

+ public: boolean

+ Slug: string `——

2.Back-end

2.1 Kết nối database trong back-end

Đề kết nối mongoDB với ExpressJS, chúng ta cần tải một thư viện hỗ trợ ta kết nối dé dang hon d6 1a Mongoose

Trong Mongoose có cung cấp cho chúng ta một phương thức Connect đề kết nỗi với database

2.2.1.User Model

const UserModel = new Schema(

a

LI [] name: OO O type: String,

0 default: null,

We

email: { Ui type: String, 0 default: null,

We

password: { Ui type: String, 0 default: null,

We

verify: { UO type: Boolean, OU default: false,

We

avartar: { Ui type: String, Li default: null,

BI

LI banned: { OO type: Boolean, OO default: false,

nee We

{ timestamps: true } a

a a a a a a a a a a a a a a a a

L L L L L L L L L L L L L L L L L L L L L L L L );

2.2.2.Product Model

const ProductModel = new Schema( LI[] tre: {

OO O type: String, OO O default: '",

ULÿ,

description: {

HH

a a a a a O

Ui type: String, Li default: null,

We

price: { UO type: Number, Li default: 0,

a a a a a a a a a a a a a a a a a a a a a a a a a a a HH HH LL

cart userld: {

O ref: "user", Oj require: true,

ie

cart status: { LI type: String,

O enum: ["active", "pending", "failed", "completed"], O default: "active",

ie

cart_products: [ Li produet 1d: {

OO ref: "product", OO require: true,

H},

LI variation 1d: {

OO ref: "product_item", OO require: true,

12

LHỷ,

Li Ll cart total: { LI [1 L] type: Number, OO O default: 0,

O { timestamps: true }

2.3.Services 2.3.1.UserServices

Trong ỦserServices sẽ có một phương thức đó là getUserByEmaIl()

L?)

0 populate( 0 O title: 1, LÏ a

OU slug: 1, i] a a a a a a a a a a a a a a a a a a

13

Li LI LI.populate( OO O vselect({ .select }); OO return product;

async createProduct(payload) { OU if Cpayload.category) return null;

OO const newProduct = await Product.create(payload); OO return newProduct;

UO async updateProduct(id, payload) { O 0 if (id) return null;

OO const date = getDateTime();

OO const product = await Product.findByldAndUpdate(

OO const product = await Product.findByIdAndDelete({ _id:

O const cart = Cart.findOne({

iD)

OU inventory: 1, 0 O title: 1, 0 0 thumbnail: 1,

L?)

OU inventory: 1, 0 OU title: 1, OO thumbnail: 1,

ney

L] L] L] L] L] L] L] L] L] L] L] L] L]

OO const date = getDateTime();

apne

O cart_userld: convertObjectToString(user_1d),

Hỗ i t

Oi $set: { .payload, updatedAt: date },

>

U new: true, U upsert: true,

1 a

._populate("cart_products.product_id", { Li inventory: Ì,

L] title: 1, L] thumbnall: 1,

})

._populate("cart_products.variation_id", { Li inventory: Ì,

L] title: 1, L] thumbnall: 1,

}):

HH HH HH HH HH HH HH HH HH

O)

HH HH HH HH HH HH HH HH HH HH

updatedCart;

15

2.4.Controller 2.4.1.UserController

Trong ỦUserController sẽ có một phương thức đó là login()

const UserController = { login: async (req, res) => { OO const { email, password } =req body; LI LI If(Iemail || !password) {

OO O return new BadResquestError(400, ).send(res);

LỊ LÏ const query = req.query; OO const select = getSelect(query); O OU try {

OO O const user = await UserServices getUserByEmail(email, select);

OO const { id } = req.params; LI LI iff¡d) {

LI LI [] return new BadResquestError()

16

OO const select = getSelect(req.query);

O createProduct: async (req, res) => { OO const data = req body;

ũ Dtry {

OO O const newProduct = ProductServices.createProduct( data);

17

OO const { id } = req.params; OO const data = req body;

OO const { user 1d } = req.params; LIif(fuser 1d) {

OO return new BadResquestError(400, ).send(res);

updateCart: async (req, res) => { Oi const { user_id } =req.params; O const data = req body;

O const { product_id, variation _id, quantity } = data; O if (user_id || !data) {

OO return new BadResquestError().send(res);

[LILILILI new NotFoundError(400, "Object id invalid").send(res);

HDD}

OO O const product =

ProductServices.getProductByld(data.product_id, { O 0 O O inventory: 1,

O00 O price: 1, OO OU O promotion price: 1,

OOOO 0 £ mventory: 1, price: 1, promotion price: | }

ooog);

product").send( LI LI LI LI L] res

Biininisl HDD}

OO O: vartationProduct.price; LILIH

OO O const updatedCart =

CartServices.updateltemsCart(user_id, data); (‘updatedCart) {

O 0 O O cart count: totalltems, OO O O eart_total: totalPrice,

new CreatedResponse(201, updated).send(res); (error) {

new InternalServerError(error.stack).send(res);

const routes = (app) => {

0 app.use("/api/v I/carts", CartRoutes); ucts", ProductRoutes);

21

22

HI.Triển khai giao diện

1.Giao điện user

Về phía người dùng sẽ có các giao diện cơ bản như: Home page, Product page, Cart page, Login page

1.1.Giao dién Home Page

Home page chinh la giao dién chính của người dùng khi vào trang web Nhiệm vụ của trang home đó là sẽ show cho người đùng danh sách các sản phẩm hiện đang có

Categories

View more View more Ao thun nam Ao hoodie nam

H.2.2.Giao điện Home Page

1.2.Giao dién Product Page

Produtc Page có nhiệm vụ sẽ hiện các thông tin về sản phẩm khi người dùng nhân vào bất cứ sản phẩm nảo

Những thông tin cơ về sản phâm như: tiêu dé, giá, mô tả sẽ được phía back-end tra vé cho front-end xu li va render ra giao diện người dùng một cách trực quan

23

Home | Quan nd | Quan ống rong n en

H.2.3.Giao điện Product Page

1.3.Giao dién Cart Page

Cart Page co vai trò sẽ lấy ra các sản phâm mà người đùng sau khi thêm vào giỏ hàng Đề sử dụng được trang này bắt buộc người dùng phải đăng nhập

Ngoài ra người dùng có thê sử dụng chức năng thêm sô lượng hoặc xóa sản phâm trong giỏ hàng hiện tại

Cart

B Ao Thun DirtyCoins x BRay Thuong Ban Trai T-shirt 390.000 VND - 1 + 390.000 VND x

Total 390.000 VND Proceed to Checkout

H.2.5 Giao điện Cart Page khi người dùng đã đăng nhập

1.4.Giao dién Login Page

Giao diện login được triển khai cho cả user lẫn ađmin dùng chung

Khi người dùng đăng nhập, nếu đăng nhập sai tài khoản sẽ thông báo cho người

Login

Email

phamtrangiaan27@gmail.com Password

H.2.7.Giao dién Login Page báo lỗi

2.Giao diện Admin

2.1.Giao diện Home Page

Giao điện Home Page là trang quản lí sản phẩm của shop Trang này sẽ có nhiệm vụ hiển thị một cách trực quan thông tin sản phẩm như: tiêu dé, giá, ngay tạo để admin dễ quản lí

Trong giao diện nay, admin còn có thê sử dụng các chức năng như: edit san pham, xóa sản phâm

Products

Product Name Category Price Sale Price Inventory Status ublished

© Quần short nữ ống rộng lưng cao đẹp, Quần nữ 50000 0 25 «®Ằ a GB 2080 09 ring nat cic Quần nữ 85000 0 30 em «®Ằ° m GD) es0 605 15g a cap chun lai ts chit da Quần nữ 64000 6 2 a & ñ 9 Áo thun Team Building đồng đội, lớp nhóm, công ty Áo thưn nam 179000 0 10 Selisg @ m gg Ao Thun DirtyCoins x BRay Thương Bạn Trai T-shirt Áo thưn nam 390000 0 20 a & ñ ® Áo thun hàng hiệu Goking, form unisex cho nam nd, tré em, bé trai gai Áo thun nam 119000 0 40 c &

H.2.8.Giao dién Home Page cua admin

26

Khi admin muôn xóa một sản phâm chỉ cân lựa chọn 1con thùng rác sẽ hiện Popup

H.2.9 Popup xác nhận trước khi xóa

2.2.Giao diện Edit Product Page

Đề chỉnh sửa một sản phẩm, admin cần nhắn vào icon edit đề chuyền tới Edit Page Nhiệm vụ của trang này sẽ hiện thị thông tin cua sản phẩm

Sau khi chỉnh sửa xong, admin cần nhân lưu đề thay đối thông tin sản phẩm Nếu lưu thay đôi thành công thì sẽ tự chuyển về Home Page, nếu có lỗi sẽ thông báo lỗi cho admin biết

Update Product Quần short nữ ống rộng lưng cao đẹp Basic info Compination

H.2.10.Giao dién Edit page

27

2.3.Giao điện Create Product Page

Trang Create Page sẽ giúp admin tạo một sản phẩm mới Ađmin cần nhập các thông tin của sản phâm như: tiêu đề, mô tả, price,

Sau khi nhập thông tin, admin cần nhắn tạo đề tạo mới một sản phẩm Nếu tạo thành công sẽ tự chuyền về trang Home Pae, nếu có lỗi sé théng bao cho admin

Create Product

H.2.11.Giao dién Create Product Page

28

Tong kết

Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Gia Định đã

đưa môn học Lập trình Web vào trương trình giảng dạy Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên bộ môn - Thầy Đinh Hoàng Gia đã dạy dỗ, truyền đạt những kiến thức quý báu cho em trong suốt thời gian học tập vừa qua Trong thời gian tham gia lớp Lập trình Web của thầy, em đã có thêm cho mình nhiều kiến thức bé ich, tinh thần học tập hiệu quả, nghiêm túc Đây chắc chắn sẽ là những kiến thức quý báu, là hành trang để em có thể vững bước sau này

Bộ môn Lập trình Web là môn học thủ vị, vô cùng bồ ích và có tính thực tế cao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn của sinh viên Tuy nhiên, do vốn kiến thức còn nhiều hạn chế và khả năng tiếp thu thực tế còn nhiều bỡ ngỡ Mặc đù em đã cô găng hết sức nhưng chắc chắn bài tiêu luận khó có thể tránh khỏi những thiếu sót và nhiều chỗ còn chưa chính xác, kính mong cô xem xét và góp ý đề bài tiêu luận của em được hoàn thiện hon

Em xin chân thành cảm ơn!

29