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

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..

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIA ĐỊNH KHOA:

Z `

GIA DINH

UNIVERSITY TIỂU LUẬN LẬP TRÌNH WEB

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

Trang 2

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)

Trang 3

c0 3

1.Hiện trạng và yêu nh 3

LL Ai6n trang 3

bàci nh 4

2.Công nghệ sử dụng trong dự ấn - c1 11 9 1911 219115112112 1111111111111 1111111 kg 5 PB 5

P0 Jo n 6

"nh an .a.a.a 7

i2 8

I9 i0 in 8

2 Back-end 6-44 9

2.1 Kết néi database trong back-end cecceccccccsessessessesseessessessessseseeseseseetsesseseees 9 2.2 Model 9

2.3 SOLViCS .::.II,ILS 12 2A Comtroller ics cccceecsceeseeseeeceseeeceeeseceeesecseneeacneesecenaesesneeneeseeeeseetaesneeseeeneeenees 15 PB .aaăă 20

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

Trang 4

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

Trang 5

- Sự Đa Dạng Sản Phẩm: Website bán quần áo đang cung cấp sự đa dạng về sản

phẩm, đáp ứng nhu cầu đa dạng của người tiêu dùng

- _ Trải Nghiệm Người Dùng: Chú trọng vào trải nghiệm người dùng để tôi ưu hóa

sự thuận tiện và đễ dàng trong quá trình mua sắm trực tuyến

- _ Ả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

thực tế từ cộng đồng

- _ Thách Thức An Toàn Thông Tin: Có những thách thức về an toàn thông tin,

bao gồm vấn đề lưu trữ dữ liệu cá nhân và giao dich an toàn

- Cạnh Tranh Giữa Thương Hiệu: Sự cạnh tranh giữa các thương hiệu trực

tuyến và truyền thống đang tăng cao, đòi hỏi sự đôi mới liên tục đề giữ chân

khách hàng

- 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

Trang 6

Các chứ năng sẽ tương ứng với các Actor nhu sau:

+ Admin bao gồm các chức năng như:

Thêm sản phâm Xóa sản phâm Sua san pham

Dang nhap

+ Guest(không có tài khoản) bao gồm các chức năng như:

Xem chí tiết sản phâm + Customer(có tài khoản):

Thêm sản phẩm vào giỏ hàng

Đăng nhập

Trang 7

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

2.1.1.Next là gì?

NextJS là framework mã nguồn mở được xây dựng trên nền tảng của React, cho

phép chúng ta xây dựng các trang web tĩnh có tốc độ siêu nhanh và thân thiện

NexUS được ra đời vào năm 2016, thuộc sở hữu của Vercel NextJS bắt đầu trở

nên phô biến vào năm 2018 và tiếp tục tăng trưởng mạnh mẽ trong cộng đồng phát

triển web vào những năm sau đó Sự kết hợp của các tính năng như Server-side

Rendering (SSR) với Static Site Generation (SSG) đã giúp NextJS trở thành sự lựa

chọn hấp dẫn cho nhiều dự án phát triển ứng đụng web

CLE XT ss

H.1.1.Logo Nextjs

Trang 8

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

Trang 9

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ề phía database nhóm em sẽ triển khai và sử đụng MongoDB MongoDB là một

hệ quản trị cơ sở đữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu

người 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

Trang 10

Dd mongoDB

II - Thiết kế

1.Cơ sở dữ liệu

H.1.4.Logo MongoDB

Vì đây là một trang web bán quân áo online nên chúng ta sẽ có 3 Collections:

+ Collection Users: collection nay sẽ chứa thông tin của user như: email,

password duoc ma hoa, permissions dé phân quyên user va admin

+ 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,

— 7 + cart_products: [

{ + product_id: Objectid + quantity: number } ]

+ thumbnail: string + gallery: string]

+ hotProduct: boolean + inventory: number + sold: number

+ public: boolean

+ Slug: string

`——

Trang 11

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

Trang 12

HH

Trang 13

12

Trang 14

asyne getUserByEmail(email, select) {

O 0 if Cemail) return null;

OU const user = await User findOne({

email }).select({ .select });

UO OU return user;

2.3.2.ProductServices

Trong ProductServices sẽ có các phương thức như: getProductByldQ),

createProduct(), updateProduct, deleteProduct()

class ProductServices {

asyne getProductByld(d, select = {}) {

O 0 if (id) return null;

const product = await Product.findByld({ _id: id })

Trang 15

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) {

OO const date = getDateTime();

OO const product = await Product.findByldAndUpdate(

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

Trang 16

O const cart = Cart.findOne({

OO const date = getDateTime();

})

._populate("cart_products.variation_id", {

Li inventory: Ì, L] title: 1, L] thumbnall: 1,

Trang 17

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);

Trong ProductController sẽ có các phương thức như: getProduetByld(),

createProduct(), updateProduct, deleteProduct()

Trang 18

OO const select = getSelect(req.query);

0 // [POST] CREATE PRODUCT

O createProduct: async (req, res) => {

OO const data = req body;

17

Trang 19

deleteProduct: async (req, res) => {

Trang 20

OO const { user 1d } = req.params;

updateCart: async (req, res) => {

Oi const { user_id } =req.params;

O const data = req body;

O const { product_id, variation _id, quantity } = data;

Trang 21

[LILILILI new NotFoundError(400, "Object id

O O00 O variation id,

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

Trang 22

O 0 O O cart count: totalltems,

const routes = (app) => {

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

ucts", ProductRoutes);

21

Trang 23

22

Trang 24

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ó

Tiêu đề	Website giới thiệu, bán quần áo trực tuyến
Tác giả	Phạm Phan Minh Triết
Người hướng dẫn	Đinh Hoàng Gia
Trường học	Trường Đại học Gia Định
Chuyên ngành	Công nghệ thông tin
Thể loại	Tiểu luận
Năm xuất bản	2023
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	30
Dung lượng	2,91 MB